/* Import Google Font - Poppins */
@import url('//fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
::selection{
  color: #fff;
  background: #1a81ff;
}
.containers{
width: 500px;
    height: auto;
overflow: hidden;
background: #fff;
    border-radius: 10px;
    transition: height 0.2s ease;
    box-shadow: 0 12px 28px rgb(0 0 0 / 12%);
	margin: 0 auto;
}
.containers.active{
  height: 590px;
}
.chat-panel .emoji-header button{
  cursor: pointer;
}
.containers .wrapper{
  width: 2000px;
  display: flex;
}
video#upload-vid {
    position: relative;
}

.containers .wrapper section{
  width: 500px;
  background: #fff;
}
.containers img{
  cursor: pointer;
}
.containers .post{
  transition: margin-left 0.21s ease;
}
.containers.active .post{
  margin-left: -500px!important;
}
.containers.addpostbox.tagtopeople .post{
  margin-left: -1500px;
}
.text-center{
  text-align: center;
}
.ptb-30{
  padding: 30px 0;
}

.ptb-20{
  padding: 20px 0;
}
.tagwithuser{
  display: none;
}
.taggeduser{
  display:  inline-block;
}
.post header{
  font-size: 22px;
  font-weight: 600;
  padding: 17px 0;
  text-align: center;
  border-bottom: 1px solid #bfbfbf;
  BACKGROUND-COLOR: #5B9BD5;
  color: #FFF;
  font-family: Georgia, "Times New Roman", Times, serif;
}

.post h3 {
    font-size: 20px!important;
    font-family: Roboto, Arial, sans-serif!important;
}


.post form{
  width: auto!important;		
  margin: 0px 25px;
}
.post form .content,
.audience .list li .column{
  display: flex;
  align-items: center;
}
.post form .content img{
  cursor: default;
    max-width: 51px;
    padding: 3px;

}
.post form .content .details{
  margin: -3px 0 0 12px;
  display: flex;
    justify-content: center;
    align-items: center;
}
.post form .content .details h3{
font-size: 18px!important;
    font-weight: 900!important;
    font-family : Roboto, Arial, sans-serif;
}

form .content .details p{
  font-size: 17px;
  font-weight: 500;
}
p.profileuser{
  display: inline;
  margin: 0;
}
.content .details .privacy{
  display: flex;
  height: 25px;
  cursor: pointer;
  padding: 0 10px;
  font-size: 11px;
  margin-top: 3px;
  border-radius: 5px;
  align-items: center;
  max-width: 98px;
  background: #E4E6EB;
  justify-content: space-between;
}
.details .privacy span{
  font-size: 13px;
  margin-top: 1px;
  font-weight: 500;
}
.details .privacy i:last-child{
  font-size: 13px;
  margin-left: 1px;
}
form :where(button){
  width: 100%;
  outline: none;
  border: none;
}
form.event-form textarea{
  resize: none;
  font-size: 18px;
  margin-top: 0px;
  width: 67%;
  min-height: 100px;
  display: inline-block;
}
form textarea::placeholder{
  color: #858585;
}
form textarea:focus::placeholder{
  color: #b3b3b3;
}
form :where(.theme-emoji, .options){
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.theme-emoji{
  /*justify-content: end;*/
  float: right;
  margin-top: 15px;
}
.theme-emoji img:last-child{
  max-width: 24px;
}
form .options{
  height: 57px;
  margin: 15px 0;
  padding: 0 15px;
  border-radius: 7px;
  border: 1px solid #B9B9B9;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
form .options :where(.list, li),
.audience :where(.arrow-back, .icon, li .radio){
  display: flex;
  align-items: center;
  justify-content: center;
}
form .options p{
  color: #9d9d9d;
    font-size: 15px;
    font-weight: 600;
    cursor: default;
    margin: 0px;
}
form .options .list{
  list-style: none;
  margin:  0px;
}
#remvideo{
  cursor: pointer;
position: absolute;
    right: 5%;
    font-weight: 600;
    height: 20px;
   display: none;
    width: 20px;
    top: 15%;
}
#remimg{
  cursor: pointer;
    position: absolute;
    right: 5%;
    background: #f0f0f0;
    border-radius: 50%;
    font-weight: 600;
    height: 28px;
    border: 1px solid #dfdfdf;
    display: none;
    padding: 1px 8px;
    width: 28px;
    top: 10%;
}
.custeditbox img.emoji{
  margin: 0 3px;
}
.options .list li{
  height: 42px;
  width: 42px;
  position: relative;
  margin: 0 -1px;
  cursor: pointer;
  border-radius: 50%;
}
.options .list li:hover{
  background: #f0f1f4;
}
.options .list li img{
  width: 23px;
}
.tag-peop{
  display: none;
   position: absolute;
    top: -147px;
    text-align: center;
    width: 130px;
     background: #fff;
    box-shadow: 1px 0px 8px 6px #ededed;
}

.tag-peop p a {
    text-decoration: none;
    text-transform: capitalize;
    padding: 3px 0;
    border-bottom: 1px solid #eaeaea;
}
form button{
  height: 53px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  color: #BCC0C4;
  cursor: no-drop;
  border-radius: 7px;
  background: #e2e5e9;
  transition: all 0.3s ease;
}
form textarea:valid ~ button{
    color: #fff;
    cursor: pointer;
    font-size: 19px;
    line-height: 0;
    font-weight: 800;
    background: #1B74E4;
    /*border: 2px solid #333;*/
}
form textarea:valid ~ button:hover{
  background: #1A6ED8;
}
.publish-post {
   color: #fff;
  cursor: pointer;
  background: #FFC000;
}
.publish-post:hover{
  background: #1A6ED8;
}
.containers .audience{
  opacity: 0;
  transition: opacity 0.12s ease;
}
.containers.active .audience{
  opacity: 1;
}
.containers .tagprofile.active{
   opacity: 1;
}
.audience header{
  padding: 17px 0;
  text-align: center;
  position: relative;
  border-bottom: 1px solid #bfbfbf;
}
.fb-posting{
  cursor: pointer;
}
.audience header .arrow-back{
  position: absolute;
  left: 25px;
  width: 35px;
  height: 35px;
  cursor: pointer;
  font-size: 15px;
  color: #747474;
  border-radius: 50%;
  background: #E4E6EB;
}
.audience header p{
  font-size: 22px;
  font-weight: 600;
}
.audience .content{
  margin: 20px 25px 0;
}
.audience .content p{
  font-size: 17px;
  font-weight: 500;
}
.audience .content span{
  font-size: 14px;
  color: #65676B;
}
.audience .list{
  margin: 15px 16px 20px;
  list-style: none;
}
.audience .list li{
  display: flex;
  cursor: pointer;
  margin-bottom: 5px;
  padding: 12px 10px;
  border-radius: 7px;
  align-items: center;
  justify-content: space-between;
}
.list li.active,
.audience .list li.active:hover{
  background: #E5F1FF;
}
.audience .list li:hover{
  background: #f0f1f4;
}
.audience .list li .column .icon{
  height: 50px;
  width: 50px;
  color: #333;
  font-size: 23px;
  border-radius: 50%;
  background: #E4E6EB;
}
.audience .list li.active .column .icon{
  background: #cce4ff;
}
.audience .list li .column .details{
  margin-left: 15px;
}
.list li .column .details p{
  font-weight: 500;
}
.list li .column .details span{
  font-size: 14px;
  color: #65676B;
}
.list li .radio{
  height: 20px;
  width: 20px;
  border-radius: 50%;
  position: relative;
  border: 1px solid #707070;
}
.radios input[type='radio']{
  cursor: pointer;
  width: 23px;
    height: 23px;
}
.list li.active .radio{
  border: 2px solid #4599FF;
}
.list li .radio::before{
  content: "";
  width: 12px;
  height: 12px;
  border-radius: inherit;
}
.list li.active .radio::before{
  background: #4599FF;
}
.tagsparson ul li{
width:  130px!important;
height: unset!important;
}


.add-wales-post{
  position: relative;
}
img#output {
 
    display: block;
    left: 15%;
    top: 55px;
}
.custeditbox{
  /*height: 265px;*/
  height:auto;
  display: block;
  padding: 10px;
}
.custeditbox:focus {
    outline: 0;
}
.list .locat{
  width: 28px!important;
}
.emojiPickerIcon{
    position: absolute;
    bottom: -15px;
    top: unset;
    right: -13px;
    background-color: unset !important;
    cursor: pointer;
}

/*tag person profile list start here*/
.tagprofile .list li .column{
  display: flex;
  align-items: center;
}
.tagprofile :where(.arrow-back, .icon, li .radio){
  display: flex;
  align-items: center;
  justify-content: center;
}
.containers .tagprofile{
  opacity: 1;
  transition: opacity 0.12s ease;
}
.containers.active .tagprofile{
  opacity: 1;
}
.tagprofile header{
  padding: 17px 0;
  text-align: center;
  position: relative;
  border-bottom: 1px solid #bfbfbf;
}
.tagprofile header .arrow-back{
  position: absolute;
  left: 25px;
  width: 35px;
  height: 35px;
  cursor: pointer;
  font-size: 15px;
  color: #747474;
  border-radius: 50%;
  background: #E4E6EB;
}
.tagprofile header p{
  font-size: 22px;
  font-weight: 600;
}
.tagprofile .content{
  margin: 20px 25px 0;
}
.tagprofile .content p{
  font-size: 17px;
  font-weight: 500;
}
.tagprofile .content span{
  font-size: 14px;
  color: #65676B;
}
.tagprofile .list{
  margin: 15px 16px 20px;
  list-style: none;
}
.tagprofile .list li{
  display: flex;
  cursor: pointer;
  margin-bottom: 5px;
  padding: 12px 10px;
  border-radius: 7px;
  align-items: center;
  justify-content: space-between;
}
.list li.active,
.tagprofile .list li.active:hover{
  background: #E5F1FF;
}
.tagprofile .list li:hover{
  background: #f0f1f4;
}
.tagprofile .list li .column .icon{
  height: 50px;
  width: 50px;
  color: #333;
  font-size: 23px;
  border-radius: 50%;
  background: #E4E6EB;
}
.tagprofile .list li.active .column .icon{
  background: #cce4ff;
}
.tagprofile .list li .column .details{
  margin-left: 15px;
}

/*tag person profile list end here*/


/*life event list start here*/
.eventlife .list li .column{
  display: flex;
  align-items: center;
}
.eventlife :where(.arrow-back, .icon, li .radio){
  display: flex;
  align-items: center;
  justify-content: center;
}
.containers .eventlife{
  opacity: 1;
  transition: opacity 0.12s ease;
}
.containers.active .eventlife{
  opacity: 1;
}
.eventlife header{
  padding: 17px 0;
  text-align: center;
  position: relative;
  border-bottom: 1px solid #bfbfbf;
}
.eventlife header .arrow-back{
  position: absolute;
  left: 25px;
  width: 35px;
  height: 35px;
  cursor: pointer;
  font-size: 15px;
  color: #747474;
  border-radius: 50%;
  background: #E4E6EB;
}
.eventlife header p{
  font-size: 22px;
  font-weight: 600;
}
/*.eventlife .content{
  margin: 10px 11px;
}*/
.eventlife .content p{
  font-size: 17px;
  font-weight: 500;
}
.eventlife .content span{
  font-size: 14px;
  color: #65676B;
}
.eventlife .list{
  margin: 15px 16px 20px;
  list-style: none;
}
.eventlife .list li{
  display: flex;
  cursor: pointer;
  margin-bottom: 5px;
  padding: 12px 10px;
  border-radius: 7px;
  align-items: center;
  justify-content: space-between;
}
.list li.active,
.eventlife .list li.active:hover{
  background: #E5F1FF;
}
.eventlife .list li:hover{
  background: #f0f1f4;
}
.eventlife .list li .column .icon{
  height: 50px;
  width: 50px;
  color: #333;
  font-size: 23px;
  border-radius: 50%;
  background: #E4E6EB;
}
.eventlife .list li.active .column .icon{
  background: #cce4ff;
}
.eventlife .list li .column .details{
  margin-left: 15px;
}

/*Life event list end here*/

form.suggestfriend {
    clear: both;
}
.suggestfriend input{
    width: 80%;
    display: inline-block;
    float: left;
    height: 50px;
    border-radius: 7px;
    border: 1px solid #d5d5d5;
    margin-bottom: 20px;
}
.suggestfriend button{
  width: 17%!important;
    display: inline-block;
    float: right;
    padding: 0px;
    height: 50px;
    font-size: 16px;
    cursor: pointer;
}

.lifevent .list li .column{
  display: flex;
  align-items: center;
}
.lifevent:where(.arrow-back, .icon, li .radio){
  display: flex;
  align-items: center;
  justify-content: center;
}
.containers .tagprofile{
  opacity: 1;
  transition: opacity 0.12s ease;
}
.containers.active .tagprofile{
  opacity: 1;
}
.lifeventheader{
  padding: 17px 0;
  text-align: center;
  position: relative;
  border-bottom: 1px solid #bfbfbf;
}
.lifeventheader .arrow-back{
  position: absolute;
  left: 25px;
  width: 35px;
  height: 35px;
  cursor: pointer;
  font-size: 15px;
  color: #747474;
  border-radius: 50%;
  background: #E4E6EB;
}
.lifeventheader p{
  font-size: 22px;
  font-weight: 600;
}
.lifevent.content{
  margin: 20px 25px 0;
}
.lifevent.content p{
  font-size: 17px;
  font-weight: 500;
}
.lifevent.content span{
  font-size: 14px;
  color: #65676B;
}
.lifevent.list{
  margin: 15px 16px 20px;
  list-style: none;
}
.lifevent.list li{
  display: flex;
  cursor: pointer;
  margin-bottom: 5px;
  padding: 12px 10px;
  border-radius: 7px;
  align-items: center;
  justify-content: space-between;
}
.list li.active,
.lifevent.list li.active:hover{
  background: #E5F1FF;
}
.lifevent.list li:hover{
  background: #f0f1f4;
}
.lifevent.list li .column .icon{
  height: 50px;
  width: 50px;
  color: #333;
  font-size: 23px;
  border-radius: 50%;
  background: #E4E6EB;
}
.lifevent.list li.active .column .icon{
  background: #cce4ff;
}
.lifevent.list li .column .details{
  margin-left: 15px;
}
.chat-panel{
  display: none;
}
.addedemojis{
  display: block;
}

form.event-form .event-row {
    margin: 10px 23px;
    display: flex;
    align-items: center;
}
.eventphoto{
      border: 1px solid rgb(133, 133, 133);
      position: relative;
}

input#photoevent:after {
    content: 'Add Photo';
    background: #fff;
    width: 95%;
    height: 23px;
    padding: 8px;
    top: 0px;
    position: absolute;
    left: 0px;
}

form.event-form .event-row label {
  width: 30%;
    display: inline-block;
}
form.event-form .event-row input {
    display: inline-block;
    width: 67%;
    height: 40px;
	margin: 0;
}
.event-btn{
  display: flex;
  justify-content: center;
  align-items: center;
}
.publish-event{
    color: #fff;
    cursor: pointer;
    background: #4599FF;
    height: 40px;
    font-size: 18px;
    font-weight: 500;
    width: 50%;
    border-radius: 7px
}
textarea#eventdescription {
    padding: 8px;
    font-size: 13px;
}

/*tooltip start here*/

.tooltip_facebook {
  display: inline;
  position: relative;
}
.tooltip_facebook:hover:after{
      display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    background: #444;
    border-radius: 8px;
    color: #fff;
    position: absolute;
    content: attr(title);
    left: -235%;
    bottom: 139%;
    font-size: 13px;
    padding: 13px;
    width: 125px;
}
.tooltip_facebook:hover:before{
  border: solid;
  border-color: #444 transparent;
  border-width: 12px 6px 0 6px;
  content: "";
  left: 45%;
  top: -40%;
  position: absolute;
}
.locatlab:hover:before{
  bottom: 38px;
}
.emoji-header button{
padding: 0px!important;
}

[contentEditable=true]:empty:before{
        content:attr(data-text);
       font-style:italic;
	   color:#939393;
    }
/*tooltip end here*/

/*Post box element start here*/

.post-boxs{
   /*width: 500px;*/
    height: auto;
    margin: 15px 0;
    padding: 12px 0;
    background: #fff;
    border-radius: 10px;
    transition: height 0.2s ease;
    box-shadow: 0 12px 28px rgb(0 0 0 / 12%);
}
img.profile-user-cmt{
  max-width: 35px;
  border-radius: 55px;
}

.form-input-details input {
    height: 50px;
    border-radius: 7px;
}
.form-input-details input:focus, .form-input-details select:focus{
  box-shadow: unset!important;
}

.form-input-details select.form-control:focus-visible {
    outline: 0;
}

.form-input-details select{
height: 50px;
    border-radius: 7px;
    margin-top: 10px;
}
.post-comment-box{
    display: block;
    padding: 0;
    overflow: hidden;
}
.post-content{
  position:  relative;
  display: flex;
    align-items: center;
    margin: 10px;
}
.post-comment-box img {
    object-fit: cover;
   /* height: 280px;*/
    width: 100%;
}
p.commented-user{
  display: inline;
  margin: 0 8px;
  font-weight: 600;
}
.post-added-option{
height: 57px;
    margin: 8px 10px;
    padding: 0 15px;
    border-bottom: 1px solid #B9B9B9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.post-added-option p{
  color: #595959;
    font-size: 15px;
    font-weight: 500;
    cursor: default;

}
.post-added-option a{
  text-decoration: none;
    margin: 0;
    font-size: 14px;
    display: flex;
    color: #959595;
    font-weight: 600;
}
.post-added-option a img{
  margin: 0 7px;
}
.posted-post{
    margin: 0 10px 10px 10px;
    line-height: 1.3;
    font-size: 15px;
}


/* Flag style start here now */

.vodiapicker{
  display: none; 
}

button.btn-select:after {
    content: '';
    position: absolute;
    cursor: pointer;
    width: 16px;
    height: 16px;
    top: 12px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../icons/down-arrow.png);
    right: -14px;
    color: #bdbdbd;
}

#flags-list{
  margin: 0;
  padding-left: 0px;
}
ul#flags-listss {
    margin: 0;
    padding-left: 0px;
}
ul#flags-listss li {
    list-style: none;
    height: 42px;
}

/*#flags-list img, .btn-select img{
  width: 20px;
}*/

#flags-list li{
  list-style: none;
  height: 42px;
}

#flags-list li:hover{
 background-color: #F4F3F3;
}

#flags-list li img{
  margin: 0 3px;
}

#flags-list li span, .btn-select li span{
  margin-left: 30px;
}

/* item list */

.flag-blk{
  display: none;
  width: 100%;
  max-width: 40px;
}
.flag-blks{
  width: 100%;
  max-width: 40px;
}
.btn-select{
     margin: 0 auto;
    width: 100%;
    cursor: pointer;
    cursor: not-allowed;
    max-width: 45px;
    padding: 3px;
    height: auto;
    border-radius: 0px;
    background-color: #fff;
 
}
.btn-select li{
  list-style: none;
  cursor: pointer;
  float: left;
  height: 35px;
  padding-bottom: 0px;
}
.btn-select li img{
  cursor: pointer;
}
.btn-select:hover li{
  margin-left: 0px;
}

.btn-select:hover{
  /*background-color: #F4F3F3;
  border: 1px solid transparent;
  box-shadow: inset 0 0px 0px 1px #ccc;*/
  }

.btn-select:focus{
   outline:none;
   background-color: #fff;
}

.lang-select{
  margin-left: 50px;
}
.lang-select li img{
    max-width: 100%!important;
    width: auto;
    padding: 0px!important;
}
.country-list{
    position: absolute;
    right: 5%;
    top: 10px;
}
button.btn-select:hover{
  background: #fff!important;
}
/* Flag style end here now */

span.country-list-label{
  position: relative;
    margin: 0 auto;
    right: 17px;
    color: #939393;
    font-weight: 500;
    font-size: 15px;
}

.treacycontent-val:before{
content: ''!important;
}
.post-added-option a span.likes_count {
  color: #000;
}

.post form .content .country-list {
    right: 2%;
}

img.familytree {
    width: 7%;
    position: relative;
    top: 10px;
}

.circle-sketch-highlight{
  position:relative;
}

.circle-sketch-highlight:before{
  content:"";
  z-index:-1;
  left:-0.5em;
  top:-0.2em;
  border-width:6px;
  border-style:solid;
  border-color:#f2b505;
  position:absolute;
  border-right-color:transparent;
  width:100%;
  height:1em;
  transform:rotate(2deg);
  opacity:0.7;
  border-radius:50%;
  padding:0.5em 0.45em;
}

.circle-sketch-highlight:after{
  content:"";
  z-index:-1;
  left:-0.5em;
  top:0.1em;
  padding:0.5em 0.45em;
  border-width:6px;
  border-style:solid;
  border-color:#f2b505;
  border-left-color:transparent;
  border-top-color:transparent;
  position:absolute;
  width:100%;
  height:1em;
  transform:rotate(-1deg);
  opacity:0.7;
  border-radius:50%;

}
.meeting-highlighter{
    background: url(../../images/circled.gif);
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 121px;
    background-position: left center;
    height: 32px;
}
@media only screen and (max-width: 560px){

  span.country-list-label{
    top: 25px;
    right: 50px;
  }
  .post form .content .details h3{
    font-size: 15px!important;
    position: relative;
    top: -6px;
  }
  .lang-select #flags-listss li img{
    max-width: 80%!important;
  }
  .btn-select{
   margin-top: 23px;
   max-width: 42px;
    margin-bottom: 0;
  }
  .flag-blk{
    max-width: 37px;
  }
  .containers .wrapper{
    width: auto;
  }
  .containers{
    width: auto;
  }
  .post form{
    margin: 0 15px;
  }
  .country-list{
    z-index: 99;
    right: 1%;
  }
  ul#flags-listss li{
        height: 38px;
  }
  .flag-blks{
        max-width: 37px;
  }
}
/*Post box element end here*/