.body-follower-section{max-width: 95%;
  margin: 25px auto;}
body{background: #f2f2f2!important}
body, html, .follower-page-section{height: auto;  }

.body-left-side{background: #fff;box-shadow: 0px 3px 1px #0000001F;
border-radius: 4px;}

.Because-you-follow-div, .People-you-might-know-div, .bottom-right-side-div{background: #fff;box-shadow: 0px 3px 1px #0000001F;
border-radius: 4px;     margin-bottom: 1rem;}





/*button change css*/

button .msg-follow,
button .msg-following,
button .msg-unfollow{
  display: none;
}

button .msg-follow{
  display: inline;
}

button.following .msg-follow{
  display: none;
}

button.following .msg-following{
  display: inline;
}

button.following:not(.wait):hover .msg-following{
  display: none;
}
.media .button-side button.following:not(.wait):hover, .media .button-side-right button.following:not(.wait):hover{background: red!important;border: red;color: #fff}
button.following:not(.wait):hover .msg-unfollow{
  display: inline;
}
/*button change css close*/


.suggestion-page .twPc-div {
  position: relative;
    background: #fff none repeat scroll 0 0;
    border: 1px solid #e1e8ed;
    border-radius: 6px;
    height: 15rem;
    max-width: 100%;
}
.suggestion-page .twPc-bg {
    background-image: url("https://pbs.twimg.com/profile_banners/50988711/1384539792/600x200");
        background: #22a7de;
    background-position: 0 50%;
    background-size: 100% auto;
    border-bottom: 1px solid #e1e8ed;
    border-radius: 4px 4px 0 0;
    height: 7rem;
    width: 100%;
}
.suggestion-page .twPc-block {
    display: block !important;
}
.suggestion-page .twPc-button {
    margin: -35px -10px 0;
    text-align: right;
    width: 100%;
}
.suggestion-page .following-page-body-cc {
    height: auto;
    overflow-x: hidden;
    overflow-y: hidden!important;

}
.user-name-details-suggestion{    clear: both;}
.user-name-details-suggestion h3{font-size: 1.4em}
.user-name-details-suggestion p{color: #686868;margin-bottom: 0px!important}
.user-name-details-suggestion .media span{color: #686868;font-size: smaller}

.body-follower-section .twPc-avatarLink {
    background-color: #fff;
    border-radius: 50%;
    display: inline-block !important;
    float: left;
  margin: -0.5em 8px 0 8px;
    max-width: 100%;
    padding: 1px;
    vertical-align: bottom;
}
.body-follower-section .twPc-avatarImg {

    border: 2px solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
    color: #fff;

}
.body-follower-section .twPc-divUser {
    margin: 5px 0 0;
}
.body-follower-section .twPc-divName {
    font-size: 18px;
    font-weight: 700;
    line-height: 21px;
}
.body-follower-section .twPc-divName a {
    color: inherit !important;
}
.body-follower-section .twPc-divStats {
    margin-left: 11px;
    padding: 10px 0;
}
.body-follower-section .twPc-Arrange {
    box-sizing: border-box;
    display: table;
    margin: 0;
    min-width: 100%;
    padding: 0;
    table-layout: auto;
}
.body-follower-section ul.twPc-Arrange {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.body-follower-section .twPc-ArrangeSizeFit {
    display: table-cell;
    padding: 0;
    vertical-align: top;
}
.body-follower-section .twPc-ArrangeSizeFit a:hover {
    text-decoration: none;
}
.body-follower-section .twPc-StatValue {
    display: block;
    font-size: 18px;
    font-weight: 500;
    transition: color 0.15s ease-in-out 0s;
}
.body-follower-section .twPc-StatLabel {
    color: #8899a6;
    font-size: 10px;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-transform: uppercase;
    transition: color 0.15s ease-in-out 0s;
}
.suggestion-sldier-follow-button{    display: inline-block;
    color: #22a7de !important;
    border: 1px solid;
    padding: 0px 15px;
    border-radius: 20px;
    position: absolute;
    right: 1rem;
    top: 50%;transition: .5s ease}
.suggestion-sldier-follow-button:hover, .Follow-btn:hover{
  color: #fff !important;
  background: #22A7DE;
}

.following:hover{background: transparent;color: #22A7DE!important}
.following{background: #22A7DE;
    padding: 2px 20px;
    color: #fff;
    border-radius: 15px 15px 15px 15px;}

.following-btn,.Follow-btn{transition: .5s ease;cursor: pointer;}
.following-btn:hover{background: transparent;color: #22A7DE;
    border: 1px solid;}
    .body-follower-section .right-side-header{    padding: 15px 0px 0px;
    border-bottom: 1px solid #f2f2f2;}
.author-name-user-ff #pills-tab{display: flex;justify-content: space-between;}
.author-name-user-ff{padding: 0px!important}
.author-name-user h5{    margin: 0px;
    font-size: 18px;
    font-weight: bolder;}
    .author-name-user p{color: #686868}
.author-name-user-ff #pills-tab li button{    background: transparent;
    color: #686868;
    padding: 0px 0px 10px;
    border: none;
    height: 100%;width: 100%}
    .author-name-user-ff #pills-tab .active{color: #22A7DE!important;border-bottom: 3px solid #22A7DE;border-radius: 0px}

    .author-name-user-ff #pills-tab li{width: 50%}
  .left-body-content #pills-tabContent ul li .media{border-bottom: 1px solid #f2f2f2;padding: 10px 0px;}
.left-body-content #pills-tabContent ul li .media .Personal-image img{width: 50px;height: 50px;border-radius: 50%;object-fit: cover;}
.left-body-content #pills-tabContent .list-main  {margin-top: 1rem}
.left-body-content #pills-tabContent .list-main li .bio-discription p{margin-bottom: 0px;    font-size: 14px;}
.left-body-content #pills-tabContent .list-main li .name-user{font-size: 16px;
    margin: 0px;}
  .left-body-content #pills-tabContent .list-main li .user-id  {    margin: 0px;
    color: #686868;
    font-size: 14px;}
.Follow-btn{border-radius: 15px}
.msg-unfollow{color: #fff}
.button-side button{    width: 110px;
    font-size: 14px;
    height: 30px;padding: 0px}
.left-body-content {       max-height: 65rem;
    overflow-y: auto;}

    .left-body-content::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.left-body-content {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

}

.rightside-body .right-side-div-header h1{font-size: 18px;
    font-weight: bold;
    margin: 0px;}
  .rightside-body .right-side-div-header  {padding-top: 15px;}
  .rightside-body .right-side-div-header p{font-size: 14px;
color: #686868}
  .rightside-body .right-side-list-friend .Personal-image img{width: 50px;height: 50px;object-fit: cover;}
  .right-side-list-friend .media .media-body .name-user {font-size: 16px;
    margin: 0px;}
  .right-side-list-friend .media .media-body .user-id{    margin: 0px;
    color: #686868;
    font-size: 14px;}
  .right-side-list-friend .media .media-body .bio-discription p{margin: 0px;
    font-size: 12px;}
.button-side-right button{    width: auto;
    padding: 4px 10px;
    font-size: 12px;}
.right-side-list-friend ul li{border-bottom: 1px solid #f2f2f2;padding: 10px 0px}
.right-side-list-friend ul {margin-bottom: 0px}
.more-button-footer button{width: 100%;
    padding: 10px;
    background: transparent;
    border: none;
    color: #22a7de;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    line-height: 50px;}
.more-button-footer button span{margin-left: .5rem;
    font-size: 15px;
    margin-top: 0px;}
    .shop-brand-image img{    width: 50px;
    height: 50px;
    border: 1px solid #f2f2f2;
    border-radius: 50%;
    object-fit: contain;}
    .right-side-list-friend ul li .media{position: relative;}
    .right-side-list-friend ul li .media .button-side-right{position: absolute;
    right: 0px;
    top: 0px;}
.People-slide .owl-dots{display: none;}
.People-slide .owl-nav{position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);height: 0px;}
.People-slide .disabled{visibility: hidden;}
.People-slide .owl-nav button {    height: 30px;
    width: 30px;
    background: #00000045!important;
    color: white!important;
    border-radius: 50%;}

    .twPc-avatarLink img{width: 50px!important;height: 50px;border-radius: 50%}
    .pd-right-none{padding-right: 0px!important}
    .People-slide .suggestion-cards{padding: 0px!important}
    .suggestion-cards{border: 1px solid #f2f2f2;
    border-radius: 5px;
    overflow: hidden; transition: .5s ease}
        .People-slide .suggestion-cards .top-head-blue-section{height: 100px;
    background: #22a7de;}
    .People-slide  .item{padding-right: 1rem}
.slider-body-section{padding: 0px!important}
.body-section-on-slider{padding-top: 3rem;}
.slider-body-section .media-body .user-image img{width: 50px;height: 50px;border-radius: 50%;object-fit: cover;}
.slider-body-section .media-body .user-image{position: absolute;
    top: -25px;
    left: 10px;}
.body-section-on-slider .user-name h4{font-size: 16px;margin: 0px;    font-weight: bold;}
.body-section-on-slider .user-id p{font-size: 14px;
    color: #686868;}
.follow-by-friend .media-body p {margin: 0px;
    font-size: 12px;
    padding-left: 0.5rem;}
    .suggestion-cards .button-side-right{ position: absolute;
    z-index: 9999;
    right: 10px;
    top: 1rem;}
        .People-slide .follow-by-friend{    padding-bottom: .5rem;}


        .show-mobile{display: none;}
.left-top-head{color: #000!important}
/*mobile media query*/
@media only screen and (max-width: 768px) {
   .right-side-header.suggestion-header-left{    position: fixed;
    z-index: 999;
    background: #fff;
    height: 4rem;
    display: flex;
    align-items: center;}
    #suggestion-following{    margin-top: 4rem;padding-top: .5rem;}

  .right-side-header .user-name-top-header-left-side{position: fixed;
    z-index: 9999;
    background: #ffff;
    width: 100%;
    left: 0px;
    border-bottom: 2px solid #F2F2F2;
    top: 0px;
    height: 4rem;
    display: flex;
    align-items: center;}
    .author-name-user-ff{margin-top: 4rem;}
    .user-name-top-header-left-side .media-body p{margin-bottom: 0px}
  .body-follower-section .right-side-header{    box-shadow: 0px 1px 3px #000000a6;}
.show-mobile{display: block!important;}
.left-top-head .show-mobile .fa-chevron-left{    color: #22a7de;}
.body-follower-section{    max-width: 100%;
    margin: 0px auto;}
    .follower-page-section .body-follower-section .col-md-8{padding: 0px!important}
    .left-top-head .media{padding-left: 15px}
      #pills-following .list-main li .media{position: relative;}
    #pills-following .list-main li .media .button-side , #pills-follower .list-main li .media .button-side {position: absolute;
    right: 15px;
    top: 15px;}
    .button-side button {
    width: auto;
    font-size: 12px;
    height: 30px;
    padding: 0px 10px;
}
#pills-follower .list-main li .media{position: relative;}
.rightside-body{padding: 0px;
    margin-top: 1rem;}
    .body-section-on-slider .user-id p{    margin-bottom: 0.5em;}
    .follow-by-friend .media-body p{font-size: 10px;}
    .People-slide .suggestion-cards .top-head-blue-section {
    height: 70px;}
}

.suggestion-header-left .left-top-head .media-left  img{width: 25px;height: 25px;object-fit: contain;}
.suggestion-header-left .left-top-head .media{padding: 0px 15px 15px}
.left-top-head{cursor: pointer;}

@media only screen and (min-width: 768px) {
  .user-name-top-header-left-side{    display: inline-block!important;}
}