/* 
*
=======================================================================+
------------------------------------------------------------------------
   FILE NAME : Friends page
------------------------------------------------------------------------
========================================================================
*
*/ 


/* General Styles */

.friends-main-container{
   width:100%;
   padding: 0px 100px;
}
.friends-container .col-lg-2{
   max-width:100%;
}
.friends-container{
   height:auto;
   width:100%;
   border-top: 8px solid #cc0e88;
   background-color:#2f242a;
   border-radius:10px 10px 0 0;
   padding:20px 20px;
}
/* .friends_row{
   padding-left:10px;
   padding-right:10px;
   
} */



.friends-container .fs-lg.text-600.mb-4{
   text-align:center;
}

.friends-container .custom_friendcard{
   height:194px;
   width:100%;
   
}

.friends_row{
   padding-left:6px;
   
}
.friends-container select.form-control.custom_search_dropdown{
background:#171115;
   color:#898385;
   font-size:14px;
}
.friends-container .mylist .no-msg .opacity-5{
   color:#898385!important;
   opacity:1!important;
}
.friendcard.custom_main{
   padding:0;
   background-color:transparent !important;
   border:none;
   margin-bottom:7px;
}

 .mylist .mylist-friends{
    display:flex;
   justify-content:start;
   flex-flow:wrap;
   margin:auto;
   

}
/* .friends-container .row{
   display:flex;
   flex-flow:wrap; 
   justify-content:start;
   grid-gap:10px;
   margin-left:0px;
   margin-right:0px;
} */


.friends-container select.form-control.custom_search_dropdown{
   margin:0px;
}

.friends-container .custom_friendcard_main{
    width:100%;
   position:relative;
}

.friends-container .custom_user_last_login_info{
   padding-left:5px;
   width:75%;
   position:absolute;
   left:23px;
   top:-1px;
   overflow:hidden;
   background-image:linear-gradient(rgba(0,0,0, .6), rgba(0,0,0,.6)); 
   color:#ffffff;

   
}
.friends-container .display_name a {
   
    background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6));
    position: relative;
    top: -7px;
    margin-left: 9px;
    padding: 7px 13px;
    border-radius: 10px;

}
 .friends-container .ppt-avatar-xxl{
    width:100% !important;
    height:100% !important;

}
.friends-container .ppt-avatar.ppt-avatar-xxl .visible{
   width:95% !important;
   height:161px !important;
   border: 1px solid #7a837747!important;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

}
.friends-container .friendcard .custom_main{
     padding:0 !important;
     margin:0 !important;
}

.friends-container .custom_display_name_btn_main{
   width:93%;
}

.friends-container .btn-system{
   position:relative;
   top:-2px;
   border-radius:10px;
}



 @media only screen and (min-width: 1000px) and (max-width: 1275px){
    
    .friendcard.custom_main{
       width:100% !important;
       height:125px !important;
    }
    .friends_row{
       display:grid !important;
       grid-template-columns: auto auto auto auto auto;
    }
   
   .friends-container .ppt-avatar.ppt-avatar-xxl .visible {
      width:95% !important;
      height:120px !important;

}
    .friends-container .custom_user_last_login_info {
         font-size:9px !important;
    }
   .friends-container .custom_display_name_btn_main{
         top:94px;
         width:150px;

   }
}
 

 @media only screen and (min-width: 700px) and (max-width: 1000px) {
   .friends-container .custom_friendcard{
      height:150px;
      width:100%;
   
} 
    .friends-container .hide-mobile{
      display:block !important;
       width:100%;
      
   }
   
   
/*    .friends-container .mylist .mylist-friends{
          display:grid;
         grid-template-columns: auto auto auto;
         place-self:center
         
      
   } */
   .friends-container .custom_display_name_btn_main{
         top:134px;
         width:180px;

   }
   .friends-container .custom_user_last_login_info{
      font-size:8px !important;
      width:70%;
   }
   .friends-container .display_name a {
      padding:10px 10px;
   }
   .friends-container .custom_friendcard_main{
      height:170px;
   }
   
}  
 

@media only screen and (max-width: 576px){
   
  .friends-main-container{
     width:100%;
     padding: 0px 0px;
}
   .friends-container{
      width:100%;
}
   
   .friendcard.custom_main{
      width:100% !important;
      height:100px !important;
   }
   
   .friends-container .custom_friendcard{
      height:100px !important;
      width:95% !important;
     }
   
   .friends-container .ppt-avatar.ppt-avatar-xxl .visible{
      height:100px !important;
       width:100% !important;
      border-radius:0px;
   }
    .friends-container .row{
      
      display:grid !important;
      grid-template-columns:auto auto auto;
/*       margin:auto; */
      overflow:hidden; 
   }
   
   .friends-container .custom_friendcard_main{
      width:100%;
   }
   .friends-container .custom_display_name_btn_main{
      display:flex;
      flex-direction:column;
      top:55px;
   }

    .friends-container .hide-mobile{
         display: block !important;
       width:100%;
      
   } 
   .friends-container [ppt-border1]{
      border:none !important;
   }
   .friends-container .display_name a {
      padding:3px 1px;
      border-radius:2px;
   }
   .friends-container .custom_add_user{
      width:65px !important;
      height:22px;
   }
   
   .friends-container .custom_user_last_login_info{
      font-size:8px !important;
      width:77%;
      left:16px;
      top:-3.5px;
   }
   .friends-container .ppt-icon-online{
      height:10px;
      width:10px;
   }
   .friends-container .custom_friendcard_main{
      height:100px;
   }
   
}




@media only screen and (max-width: 280px){
   
   .friends-container .custom_friendcard{
      height:150px;
      width:150px;
     }
   .friends-container .row{
      grid-template-columns:auto !important;
   }
   .friends-container .display_name a {
      padding:3px 1px;
      border-radius:2px;
   }
   .friends-container .custom_add_user{
      width:65px !important;
      height:22px;
   }
   
   .friends-container .custom_user_last_login_info{
      font-size:8px !important;
      width:50%;
      left:24px;
      top:-0.5px;
   }
   .friends-container .ppt-icon-online{
      width:14px;
      width:14px;
   }
   .friends-container .custom_friendcard_main{
      height:150px;
   }
   .friends-container .custom_display_name_btn_main{
      width:150px;
      top:129px;
   }

}