/*
Template Name: Socialyte
Author: Codeplus team
Author URI: https://codeplus.it
Description: An Html Template for Social Network
Version: 1.1
*/

/*---------------------------------------------------------------
[Main Color]
here you can change #f3ad00 main color.
-----------------------------------------------------------------*/
.btn-social, .badge, .btn-social, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:window-inactive {
    background: #f3ad00;
}

.btn-social {
    border: #f3ad00;
}


.comment-btn {
    display: inline-flex;
    width: 100%;
}

.comment-btn input {
    width: 90%;
}

.comment-btn button{
    margin-left: 5px;
}

.comment-btn a {
    margin-left: 5px;
}

/*----------------------------------------------------------------
  [Table of contents]
  1. Body
  2. Header
  3. Wall
  4. User profile
  5. Login
  6. Settings
  7. Scrollbar
  8. Small Devices
-----------------------------------------------------------------*/

/*----------------------------------------------------------------
1. Body
-----------------------------------------------------------------*/

html, body, .sidebar-nav, .content-posts {
    height: 100%;
}

body {
    background: #edf1f5;
    font-family: Poppins, sans-serif;
}

a, a:link, a:visited, a:focus {
    color: #404040;
    text-decoration: none;
}

b, strong {
    font-weight: 600;
}



h2 {  font-size:22px; }

h3 { font-size: 15px;
     margin-top:0;
     margin-bottom:5px;}


video, img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.emoji  { width:16px;}

.btn:focus,.btn:active, .btn:active:focus  { outline:none; }

.content-posts {
    margin-left: 240px;
    margin-top: 65px;
}

.img-user {
    width: 90%;
    margin-left: 5%;
}

.card-post .img-user  { max-width: 110px;
                        min-width: 60px;}

.card-post .chat-row .img-user { min-width:inherit; }

.img-user-mini {
    width: 30px;
    height: 30px;
}

.popular-img {
   margin-top:10px;
}


/*----------------------------------------------------------------
2. Header
-----------------------------------------------------------------*/

header {
    min-height: 50px;
    background: #fff;
    font-size: 14px;
    padding: 15px 130px 10px 370px;
    border: 1px #ccc solid;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9;
}

header .pro{
    width: 40px;
    height: 40px;
}

header, header a, header a:link, header a:visited, header a:focus {
    color: #ffffff;
    text-decoration: none;
}

header .search {
    float: left;
    margin: 0px;
}

header .fa {
    font-size: 18px;
}

header div {
    float: right;
}

header .second-icon {
    margin-right: 60px;
}

header .menu-icon { margin-top:3px; }

header .dropdown-menu, header .dropdown-menu a, header .dropdown-menu a:link, header .dropdown-menu a:focus, header .dropdown-menu a:visited {
    color: #404040;
}

header .dropdown-menu {
    padding: 0px;
    min-width: 220px;
    text-align: center;
}

header .dropdown-menu li, header .dropdown-menu li a { display: block;
                                                       overflow: hidden;}

.dropdown-menu>li>a  {  padding: 8px 20px; }

.dropdown-menu .divider {margin:0px;}

.dropdown-toggle {
    cursor: pointer;
}

.badge {
    padding: 4px 8px;
    font-size: 11px;
}

header .badge {
    position: absolute;
    top: -8px;
    right: -12px;
}

.new-not {
    background: #ffeab6;
}

.search input {
    width: 330px;
    color: #404040;
    font-size: 13px;
    padding: 5px;

}

.sidebar-nav {
    box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
    position: fixed;
    width: 240px;
    border: 1px #ccc solid;
    top: 0px;
    padding: 50px 10px 0px 10px;
    background: #fff;
    color: #edf1f5;
    z-index: 99;
}

.sidebar-image{
    width: 90%;
    height: 200px;
}

.sidebar-image img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.post-profile{
  	-webkit-border-radius: 100px;
  	-moz-border-radius: 100px;
  	-ms-border-radius: 100px;
  	-o-border-radius: 100px;
  	border-radius: 100px;
}

.post-profile img{
  height:100%;
  width: 100%;
}



/*----------------------------------------------------------------
3. Wall
-----------------------------------------------------------------*/

.card-post {
    background: #ffffff;
    padding: 15px;
    display: block;
    overflow: hidden;
    margin-bottom: 15px;
}

.container-posts {
    padding: 0 130px;
}

.img-post {
    width: 100%;
}

.info-user i { color:#929292; }

.reaction {
    padding: 10px 0;
}
.reaction a i{
    font-size: 20px;
}

.comments {
    border-top: 1px solid #dadada;
    padding-top: 5px;
}

.comments ul {
    list-style: none;
    padding: 0px;
}

.comments ul li, .comments .more-comments {
    padding: 5px 0;
}

.comments .more-comments {
    color: #ababab;
}

#loading {
    width: 36px;
    margin: auto;
    margin-bottom: 20px;
}

.user-description {
    margin-top: 20px;
    line-height: 22px;
}

.info-user { margin-top:15px; }

.info-user p {margin:0px; }

.primary-content { width:70%;
                   float: left; }

.sidebar-right  { width:28%;
                  float: left; }

.primary-content .container-posts {
    padding: 0 40px;
}

/*----------------------------------------------------------------
4. User Profile
-----------------------------------------------------------------*/

.banner-profile {
    height: 300px;
    width: 100%;
}

.banner-profile img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.profile-content {
    padding-top: 50px;
    margin-top:0px;
}

.profile-content .nav-tabs {
    padding-left: 130px;
}

.profile-data {
    list-style: none;
    padding: 0px;
    line-height: 25px;
}

.chat-message {
    padding: 12px 5px;
    border-radius: 10px;
    background: #4F5467;
    color: #fff;
    font-size: 13px;
    font-weight: 100;
}

.chat-message h4 { margin-top:2px;
                   font-size: 14px;}

.chat-row {
    margin-top: 20px;
}

.chat-message.pull-right {
    background: #3a5248;
}

.chat-time {
    font-size: 11px;
    color: #b5b5b5;
    margin-bottom: 6px;
}

.chat-message .chat-time {
    position: absolute;
    top: 12px;
    right: 20px;
}

.scrollbar-container {
    height: 340px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.badge-replay, .badge-message {
    font-size: 14px;
    position: relative;
    top: 36px;
    font-weight: normal;
}

.badge-message {
    background: #4f5467;
}

.form-message {
    margin-bottom: 0px;
    margin-top: 20px;
}

textarea.post-textarea {
    height: 80px;
}

.create-post-form input[type=submit] {
    margin-top: 10px;
}

.row-user-list {
    padding: 10px 0;
    border-bottom: 1px solid #eaeaea;
}


/*----------------------------------------------------------------
6. Settings
-----------------------------------------------------------------*/

.modal-dialog  { width:700px;}

.modal-header { background: #4F5467;
                color: #ffffff;
               }

.modal-row  { margin-top:25px; }

.modal-row p { margin-top: 8px;}


/*----------------------------------------------------------------
7. Scrollbar
-----------------------------------------------------------------*/


/*----------------------------------------------------------------
8. Small Devices
-----------------------------------------------------------------*/

@media screen and (max-width:1920px)  {
  .primary-content, .sidebar-right{  margin-top:20px;}
  .hidden-lg{
    display: show;
  }
  .hidden-xl{
    display: none;
  }

}

@media screen and (max-width:1199px)  {   header { padding: 15px 30px 10px 220px;  }

                                          .sidebar-nav {  width:190px;  }

                                          .content-posts {  margin-left:190px;}


                                          .container-posts { padding:0px 30px;  }
                                      }

@media screen and (max-width:991px) {
  .hidden-msm{
    display: none;
  }
  .hidden-xl{
    display: block;
  }
   .img-user { width: 100%;
                                                   margin: 0px;}
                                                   .sidebar-image{
                                                       width: 100%;
                                                       height: 80px;
                                                   }
                                        header .dropdown-menu { top:33px; }

                                        .primary-content { width:100%;}
                                        .sidebar-right{width: 100%}
                                        header{
                                          position: fixed;
                                        }

                                     .hidden-lg{
                                       display: show;
                                     }
   }
@media screen and (max-width:767px)  {
  .sidebar-image{
      width: 100%;
      height: 80px;
  }
  .hidden-msm{
    display: none;
  }
  .hidden-xl{
    display: block;
  }
  header { padding:0px;
           min-height: 104px;
             position: fixed;
           padding-left:125px;}

  header .search, header .search input, header .dropdown { width:100%; }

  header .search input  { border-radius:0px;
                          height: 50px;}

  header .dropdown-menu { top:36px; }

  .sidebar-nav {  width:125px;
                  height: 100px;
                  padding: 10px;}

  .img-user   { width:80%;
                margin-left:10%;  }

  .card-post .img-user { width:70%;
                        margin-left:15%; }

  .card-post .chat-row .img-user  { width:100%;
                                    margin:0px;}

  header .menu-icon { margin:0px;
                      margin-top:5px;
                      width:25%;
                      text-align: center;}

  header .menu-icon .fa  {  font-size: 20px;  }

  header .badge { position: relative;
                  right: 15px;
                  top:-12px;}

  .content-posts  {  margin:0px;
                     margin-top:120px;}
  .sidebar-right{  margin:0px;
                     margin-top:40px;}

.sidebar-right,  .container-posts, .primary-content .container-posts { padding:0px 15px;  }

  .data-post { margin-top:15px;}

  .profile-content  {  margin-top: 0px;
                       padding-top: 100px;}

  .profile-content .nav-tabs  { padding-left:15px; }

  .chat-message .chat-time {   top: 6px;
                               right: 10px;}

  .form-box  {margin-bottom:60px;}

  .modal-dialog  { width:auto;}

}

@media screen and (max-width:479px)  {
  .hidden-xl{
    display: block;
  }
  .hidden-msm{
    display: none;
  }
  .sidebar-image{
      width: 100%;
      height: 80px;
  }
                                          header { padding-left: 100px;
                                                   min-height:100px;position: fixed; }

                                          header .dropdown-menu { top:32px; }

                                           .img-user {  width:100%;
                                                        margin: 0px;}

                                          .card-post  .img-user  {width:90%;
                                                                  margin-left:5%;}

                                          .sidebar-nav { width: 100px;}

                                          .form-box  {width: 310px;
                                                      margin-top: -225px;}

                                      }