#tabl{border-bottom:.2px solid #eee;border-bottom:1px solid rgba(0,0,0,.07);box-shadow:rgba(0,0,0,.02) 0 2px 0;display:block;font-size:0;margin-bottom:5px;text-align:center;width:100%}
#tabl li{display:inline-block;font-size:14px;line-height:1.4;margin:0 1.5%}
#tabl li a{border-bottom:1px solid transparent;display:inline-block;font-size:12px;padding:13px 1px 12px 1px;position:relative;top:1px}
#tabl li a:not(:hover){color:#00bae8}
#language-tabs li a:hover:not(.active){border-color:transparent}
#tabl li a.active{border-bottom:1px solid #3e3e3e;color:#3e3e3e;cursor:default!important}
.loadmore{background-color:#416bc4;color:white;border-radius:4px;padding:6px 20px;float:right;text-align:center;text-transform:uppercase;font-size:11px}
.fix{position:fixed}
.left{text-align:left}
.right{text-align:right}
.center{text-align:center}
.share{width:96%;overflow:auto;margin:0 auto!important;padding:0!important}
.shareicon{margin:10px 0!important}
.red{color:red}
.green{color:#32cd32}
input{padding:3px;border:1px solid #7f7f7f;margin:5px 2px}
.boxs{color:#505050;border-width:1px;border-color:#dbeadc;border-style:solid;margin-top:2px;margin-bottom:2px;margin-left:2px;margin-right:2px;padding-top:4px;padding-bottom:4px;padding-left:3px}
.sb{text-align:center;background-color:#84e2f8;color:#fff;border-width:3px;border-color:#84e2f8;border-style:solid;}

.funrocks3  { position: fixed;
  left: 0%; /* Adjust this value to control the initial position (hidden off-screen) */
  width: 20%;
  height: 93vh;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  overflow-y: auto; /* Enable the scrollbar when content exceeds the height */
  transition: right 0.3s ease; /* Smooth animation when sliding in/out */
}

.funrocks33 {
    float: left;
  width: 72%;
 padding-left: 30%;
}
.funrocks34 {
    float: left;
    width: 72%;
    padding-left: 30%;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .funrocks34 {
        float: none;
        width: 100%;
        padding-left: 0;
    }
}

.funrocks333 {
  position: fixed;
  right: 0%; /* Adjust this value to control the initial position (hidden off-screen) */
  width: 20%;
  height: 93vh;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  overflow-y: auto; /* Enable the scrollbar when content exceeds the height */
  transition: right 0.3s ease; /* Smooth animation when sliding in/out */
}

.leftt {   
  float: left;
  width: 60%;
}

.rightt {
  float: right;
  width: 20%;
 
}
.funrocksin {
    float: left;
  width: 20%;
   padding-left: 20px;
}
 .imgs {
  border-radius: 50%;
  height: 60px;
  width: 60px;
 }
 .fol{
    margin:0;padding:4px;
border-bottom:1px solid;
    border: 1px solid;
    border-color: #d3d3d3;
    font-size: 14px;
    outline: 0;
    display: block;
    padding: 10px 0;
    font-weight:bold;
}
.fol3{margin:0;padding:4px;border-bottom:1px solid #ececec;}
.list_item {
    background-color: #F1F1F1;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    margin: 5px 15px 2px;
    padding: 2px;
    font-size: 14px;
    line-height: 1.5;
}
.show_more_main {
    margin: 15px 25px;
}
.show_more {
    background-image: -webkit-linear-gradient(top,#fcfcfc 0,#f8f8f8 100%);
    background-image: linear-gradient(top,#fcfcfc 0,#f8f8f8 100%);
    border: 1px solid;
    border-color: #d3d3d3;
    font-size: 12px;
    outline: 0;
}
.show_more {
    cursor: pointer;
    display: block;
    padding: 10px 0;
    text-align: center;
    font-weight:bold;
}
.loding {
    background-color: #e9e9e9;
    border: 1px solid;
    border-color: #c6c6c6;
    font-size: 12px;
    display: block;
    text-align: center;
    padding: 10px 0;
    outline: 0;
    font-weight:bold;
}

.loding_txt {
    background-image: url(loading.gif);
    background-position: left;
    background-repeat: no-repeat;
    border: 0;
    display: inline-block;
    height: 16px;
    padding-left: 20px;
}
 .imgs {
  border-radius: 50%;
  height: 60px;
  width: 60px;
 }
  .commentz {
  background-color: #f8f8f8;
    background-image: -webkit-linear-gradient(top,#fcfcfc 0,#f8f8f8 100%);
    background-image: linear-gradient(top,#fcfcfc 0,#f8f8f8 100%);
    border: 1px solid;
    border-color: #d3d3d3;
    font-size: 14px;
    outline: 0;
    display: block;
    padding: 10px 0;
    font-weight:bold;
}
  .fol4{ width: 100%;
  overflow: auto;

  }
 .fol4 a{ 
     float: left;
  padding: 2.7px;
  text-decoration: none;
  width: 16%; /* Four links of equal widths */

  }
  .fol4 a.active {
  background-color: #4CAF50;
}
.image-upload>input {
  display: none;
  
}
.imgi{
  cursor: pointer;
}
.status{
    width:150px;
}

.image-container {
  display: inline-block;
}

.circle {
  display: inline-block;
  position: relative;
}

.imgs {
  border-radius: 50%;
  height: 40px;
  width: 40px;
}

.circle::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: 50px;
  height: 50px;
  border: 2px solid green;
  border-radius: 50%;
  box-sizing: border-box;
}

.chat-panel {
  position: fixed;
  right: 0%; /* Adjust this value to control the initial position (hidden off-screen) */
  width: 20%;
  height: 88vh;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  overflow-y: auto; /* Enable the scrollbar when content exceeds the height */
  transition: right 0.3s ease; /* Smooth animation when sliding in/out */
}

.image-container {
  position: relative;
  display: inline-block;
}
.online-light {
  position: absolute;
  bottom: 0;
  left: 70%;
  transform: translateX(-5%);
  width: 12px;
  height: 12px;
  background-color: green;
  border-radius: 50%;
  border: 2px solid #fff;
}