.notificationmain{
    padding:0.625rem;
    margin: 10px 0 0 0;
    .notificationsidebar{
        background: $st-eighth-bg;
        padding:1.25rem;
        border-radius: 8px;
        strong{
            font-size: 1rem;
            font-weight: 600;
            @media #{$small} {
              font-size: 14px;
            }
        }
        a{
            font-size: 14px;
            color: $st-text-third;
            font-weight: 400;
        }
        @media #{$small} {
          margin-bottom: 20px;
        }
      }
    .notificationdetail{
        background: $st-eighth-bg;
        border-radius: 8px;
        // padding: 0.625rem;
        padding: 15px;
        height: auto;
        .connections{
             .groups{
                 display:  inline-block;
                 padding: 10px;
                 width: 100%;
                 svg{
                     font-size: 0.938rem;
                     color:  #B76C6C;
                     margin: 0 10px 0 0;
                     float: left;
                 }
                 h2{
                     font-size: 0.938rem;
                     font-weight: 700;
                     margin: 0;
                     padding: 0px 0 2px 0;
                     color: $st-heading-primary;
                     float: left;
                 
                 }
                 .righticon{
                 
                  a{
                      
                     svg{
                       float: right;
                       color: #C5C4C4;
                       font-size: $st-font14;
                     }
                   }
                    .accordion{
                      border:0!important;
                      .accordion-item{
                        margin-top: 10px;
                        
                        .accordion-header{
                          h6{
                            font-size: 0.938rem;
                            color: $st-heading-primary;
                          }
                          .accordion-button{
                            background: #fff;
                            box-shadow: none;
                            padding: 5px;
                            width: 240px;
                            svg{
                             font-size: $st-font14;
                              color: $st-text-tenth;                             
                            
                            }
                            
                          }
                        }
                        .accordion-body{
                          padding: 5px 20px;
                        }
                      }
                    }
          
                }
             
                 
             }
             .profilenav {
              margin: 0;
              padding: 0;
              //border-radius: 0 0 20px 20px;
              // background: #f1f1f1;
            //   .col-lg-8 {
            //     display: flex;
            //   }
            //   .col-md-8 {
            //    display: flex;
            //  }
            //  .col-sm-8 {
            //    display: flex;
            //  }
              .righticon{
                position: absolute;
                right: 12px;
                @media #{$small} {
                  right: -22px;
                  top: 28px;
                }
                svg{
                  color:$st-text-tenth;
                  margin: -30px 10px 6px -12px;
                  @media #{$small} {
                    font-size: 12px;
                    margin: -30px 10px 6px -7px;
                }

                }
                p{
                  font-size: 0.625rem;
                  color: $st-text-secondary;
                  font-weight: 400;
                  margin: 0;
                  
                  @media #{$small} {
                    font-size: 10px;
                }
       
                }
                span{
                  font-size: 0.5rem;
                  background: $st-primary-bg;
                  color: $st-text-ninth;
                  border-radius: 8px;
                  padding: 3px;
                  margin-left: 10px;
       
                }
              }
              
              li {
                display:inline-block;
                margin: 0;
                width: 100%;
                position: relative;
                margin-bottom: 8px;
                background: $st-eighth-bg;
                box-shadow: 0 1px 8px 0 rgba(189, 207, 212, 0.8);
                &.personal {
       
                  a {
                   font-size: 0.75rem;
                   color: $st-text-primary;
                   border-top: 0;
                   padding: 8px 10px;
                 
                  .personalinfo{
                    float: left;
                    small{
                      font-size: 14px;
                      @media #{$small} {
                        font-size: 10px;
                     }
                    }
                    
                    .messageomnth{
                      float: right;
                     
                      span{
                       font-size: 0.75rem;
                        background: $st-primary-bg;
                        color: $st-text-ninth;
                        border-radius: 8px;

                        @media #{$small} {
                          font-size: 10px;
                       }
                       
                      }
                    }
                    
                    p{
                      font-size: 0.625rem;
                      color: $st-text-secondary;
                      
                   }
                   strong{
                       font-size: 14px;
                   }
                   span{
                        font-size: 0.75rem;
                        margin-left: 10px;
                        color: $st-text-secondary;
                   }
                   .small{
                       font-size: 0.75rem;
       

                   }
                  }
                  .postimgage{
                    width: 50px;
                    float: left;
                  }
          
                    @media #{$medium} {
                      padding: 15px 10px;
                    }
                  }
          
                  a.active {
                    color: $st-text-primary;
                    font-weight: 700;
          
                    svg {
                      color: $st-text-fourth;
                    }
                  }
                }
                a {
                  font-size: 15px;
                  color: $st-text-secondary;
                  padding: 15px 20px;
                  border-top: 1px solid rgba(0, 0, 0, 0.2);
                  display: block;
                  svg {
                    margin: -3px 10px 0 0;
                  }
                }
                &.msgUnread {
                  background: #ebe8e2;
                }
                // &:hover {
                //   background: #e5e4e2;
                // }
              }
              @media #{$small} {
                display: block;
              }
            }

            .timelinePost {
              border-radius: 0;
              li {
                border-radius: 8px;
                .PostHeadWrap {
                  .userImg{
                    width: 55px;
                    img{
                      @media #{$small} {
                         width: 35px;
                       }
                    }
                  }
                  .userInfo {
                    small {
                      font-size: 14px;
                      @media #{$small} {
                       font-size: 13px;
                      }
                      strong {
                        font-size: 14px;
                        @media #{$small} {
                          font-size: 13px;
                        }
                      }
                    }
                    @media #{$small} {
                      width: 85%;
                    }
                  }
                  .userActions {
                    width: 215px;
                    @media #{$medium} {
                      width: 140px;
                     }
                    @media #{$xsmall} {
                     width: 136px;
                    }
                  
                    .notTimeStamp {
                      font-size: 12px;
                      color: $st-text-secondary;
                      font-weight: $st-font-regular;
                      @media #{$medium} {
                        font-size: 10px;
                        text-align: right;
                        margin-top: 10px;
                      }
                      @media #{$small} {
                        font-size: 8px;
                        text-align: right;
                      }
                      @media #{$xsmall} {
                        font-size: 8px;
                        text-align: right;
                      }
                    }
                  }
                }
              }
            }
        }
        @media #{$small} {
          padding: 0;
        }
    }
}