.massagemain {
  .connections {
    // margin-top: 1.25rem;
    margin-top: 30px;
    background: $st-eighth-bg;
    border-radius: 8px;

    .groups {
      display: inline-block;
      padding: 10px;
      width: 100%;
      border-bottom: 1px solid $st-border-fourth;

      svg {
        font-size: 1rem;
        color: #B76C6C;
        margin: 10px 10px 0 0;
        float: left;
      }

      h2 {
        font-size: 0.938rem;
        font-weight: 700;
        margin: 0;
        padding: 10px;
        color: $st-heading-primary;
        float: left;

        @media #{$small} {
          font-size: 15px;
        }
      }

      .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;
      background: #fff;
      // border-radius: 0 0 20px 20px;
      // max-height: 385px;
      // overflow-y: auto;

      .righticon {
        position: absolute;
        right: 10px;
        top: 20px;

        svg {
          color: $st-text-tenth ;
        }

        p {
          font-size: 12px;
          color: $st-text-secondary;
          font-weight: 500;
          margin: 0;
        }

        .msg-bubble {
          width: 22px;
          height: 22px;
          background: $st-primary-bg;
          color: $st-text-ninth;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          float: right;
        }

        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;
        border-bottom: 1px solid $st-border-fourth;

        a {
          font-size: 15px;
          color: $st-text-secondary;
          padding: 10px 15px;
          border-top: 1px solid rgba(0, 0, 0, 0.2);
          display: block;

          svg {
            margin: -3px 10px 0 0;
          }
        }

        &.personal {
          a {
            font-size: 14px;
            color: $st-text-primary;
            display: flex;
            align-items: center;
            border: none;
            padding: 15px 10px;

            .personalinfo {
              float: left;

              .messageomnth {
                float: right;

                span {
                  font-size: 0.5rem;
                  background: $st-primary-bg;
                  color: $st-text-ninth;
                  border-radius: 8px;
                }
              }

              p {
                font-size: 12px;
                color: $st-text-secondary;
                margin-bottom: 0;

                @media #{$medium} {
                  font-size: 10px;
                }

                @media #{$small} {
                  font-size: 10px;
                }

              }

              strong {
                font-size: 14px;

                @media #{$medium} {
                  font-size: 10px;
                }

                @media #{$small} {
                  font-size: 12px;
                }


              }

              span {
                font-size: 10px;
                margin-left: 10px;
                color: $st-text-secondary;
              }
            }

            .postimgage {
              width: 50px;
              float: left;

              img {
                width: 45px;
                height: auto;
                border-radius: 50%;

                @media #{$medium} {
                  width: 30px;
                }
              }
            }

            @media #{$medium} {
              padding: 10px 5px;
            }
          }

          a.active {
            color: $st-text-primary;
            font-weight: 700;
            background: #E5EEFF;

            svg {
              color: $st-text-fourth;
            }
          }
        }

        &.msg-unread {
          background: #b7e6bd;
        }

        &:last-child {
          border-bottom: none;
        }
      }

      @media #{$small} {
        display: block;
      }
    }

    .post {
      // margin-top: 12.125rem;
      background: $st-eighth-bg;
      padding: 20px;
      border-radius: 8px;

      .writepostimage {
        display: flex;
        align-items: center;
        justify-content: center;

        .writepost {
          width: 90%;
          position: relative;

          @media #{$small} {
            margin-top: 5px;
          }

          .icon {
            position: absolute;
            right: 10px;
            top: 6px;

            svg {
              color: $st-ninth-bg;
            }
            @media #{$xxsmall} {
              top: 0;
              padding: 0;
            }
          }

          .form-control {
            padding: 6px 30px 6px 12px;
          }
        }

        .follow {
          display: inline-flex;

          a {
            margin-right: 18px;
            font-size: $st-font16;
            color: $st-text-third;
            font-weight: 600;
          }

          .menuicon {
            font-size: $st-font16;
            color: $st-text-third;
            font-weight: 600;

            svg {
              margin-top: -8px;
              color: $st-text-third;
              font-size: $st-font16 ;
            }

            button {
              background: none;
              border: 0;
              color: $st-text-secondary;
              font-size: 00.75rem
            }

          }
        }
      }

      .writepost {
        span {
          display: block;
          color: $st-text-secondary;
          font-size: 0.625rem;
        }

        strong {
          font-size: $st-font16;
          color: $st-text-primary;
        }

      }

      .postimgage {
        width: 64px;
        height: 64px;

        @media #{$large} {
          width: 64px;
          height: 39px;
        }

        @media #{$medium} {
          width: 64px;
          height: 39px;
        }

        img {
          width: 50px;
          height: auto;
          border-radius: 50%;
          margin-top: 5px;

          @media #{$large} {
            width: 40px;

          }

          @media #{$medium} {
            width: 40px;

          }

          @media #{$small} {
            width: 35px;

          }

        }
      }

      .postbg {
        background: $st-primary-bg;
        padding: 160px 60px;
      }

      .user-info {
        margin: 0;
        padding: 0;
        display: flex;

        @media #{$small} {
          margin: 34px 0 0 0px;
          display: block;
        }

        li {
          font-size: 0.875rem;
          font-weight: 500;
          margin: 0 58px 10px 0;
          color: $st-text-primary;

          a {
            color: $st-text-secondary;
            font-size: 0.75rem;

            svg {
              margin-right: 5px;
              color: #E3CB73;
              font-size: $st-font20 ;

            }



          }

          &:nth-child(1) {
            svg {
              color: #E3CB73;
            }
          }

          &:nth-child(2) {
            svg {
              color: #E13434;
            }
          }

          &:nth-child(3) {
            svg {
              color: #77CDFE;
            }
          }

          &:nth-child(4) {
            svg {
              color: #A976FC;
            }
          }

          img {
            float: left;
            margin-right: 5px;

            @media #{$small} {
              width: 19px;
              height: 15px;

            }

          }




        }
      }

      .postcomment {
        .commenticon {

          .shareicon {
            width: 100%;

            li {
              margin: 0 30px 0 0;

              a {
                font-size: $st-font14;
                color: $st-text-secondary;

                svg {
                  font-size: $st-font14 ;
                  color: $st-text-third;
                  margin-right: 5px;
                }

              }

            }
          }
        }

        .likeicon {

          a {
            font-size: $st-font16;
            color: #131313;

            svg {
              font-size: $st-font16;
              color: $st-text-tenth;
              margin-right: 5px;
            }
          }

          ul {
            width: 100%;

            li {
              width: 32%;
            }
          }
        }
      }
    }

    .searchConnection {
      position: relative;
      // padding: 10px;
      padding: 12px 10px 20px 10px;
      border-bottom: 1px solid $st-border-fourth;

      @media #{$medium} {
        padding: 12px 10px 12px 10px;
      }

      // margin: 10px 0 15px 0;
      .serachConn {
        text-indent: 20px;

        @media #{$medium} {
          text-indent: 9px;
          font-size: 10px;
        }

        @media #{$small} {
          text-indent: 9px;
        }

        &::placeholder {
          position: relative;
          left: 0;
        }

      }

      .searchIcon {
        position: absolute;
        left: 20px;
        top: 18px;

        @media #{$medium} {
          left: 14px;
          top: 15px;

        }
      }

      .crossicon {
        position: absolute;
        right: 20px;
        top: 18px;

        @media #{$medium} {
          right: 14px;
          top: 14px;
        }
      }

      .userSearchResults {
        padding: 0;
        background: #fff;
        position: absolute;
        z-index: 1;
        top: 52px;
        left: 10px;
        width: 94%;
        // box-shadow: 0 0 3px #ccc;
        box-shadow: 0 3px 10px $st-boxshadow-secondary;
        border: 1px solid #dddedf;
        display: none;

        .userScrollbar {
          min-height: auto;
          max-height: 250px;
        }

        .profilenav {
          li {
            background: #ebe8e2;

            .postimgage {
              img {
                width: 40px;
                border-radius: 50%;
              }
            }

            .righticon {
              .userExist {
                color: #fff;
                background: $st-primary-bg;
                padding: 3px 6px;
                border-radius: 6px;
              }
            }

            &:hover {
              background: #e5e4e2;
            }
          }
        }
      }

      .showList {
        display: block;
      }
    }

    .overlay {
      height: 100%;
      width: 0%;
      position: fixed;
      z-index: 1;
      top: 0;
      right: 0;
      // background-color: rgba(0,0,0, 0.9);
      overflow-y: hidden;
      transition: 0.5s;

      a {
        padding: 8px;
        text-decoration: none;
        font-size: 20px;
        color: $st-text-third;
        display: block;
        transition: 0.3s;

        &.backBtn {
          position: absolute;
          font-size: 20px;
          top: 13%;
          right: 5px;
          z-index: 1;
        }
      }

      .overlay-content {
        position: relative;
        top: 7%;
        width: 82%;
        text-align: center;
        // margin-top: 30px;
        right: -70px;
      }

      @media #{$small} {
        overflow-y: auto;
      }
    }
    @media #{$small} {
      border-radius: 0;
    }
  }

  .messagedetails {
    .connections {
      .groups {
        padding: 5px 0;
        border-bottom: none;
      }

      .noMsg {
        // min-height: 210px;
        min-height: 580px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        font-weight: 500;
        padding-top: 50px;
        img {
          width: 70%;
          height: auto;
        }
      }
    }

    .profilenav {
      margin: 0;
      padding: 0;
      background: #fff;
      // border-radius: 0 0 20px 20px;
      border-radius: 0;
      // border-bottom: 1px solid $st-border-fourth;
      max-height: none;
      overflow-y: hidden;

      li {
        display: inline-block;
        margin: 0;
        width: 100%;

        &:first-child a {
          border-top: 0;
        }



        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: 5px 15px 0 0;
          }



        }

        &.personal {
          a {
            font-size: 0.75rem;
            color: $st-text-primary;

            .personalinfo {
              float: left;

              .messageomnth {
                float: right;

                span {
                  font-size: 0.5rem;
                  background: $st-primary-bg;
                  color: $st-text-ninth;
                  border-radius: 8px;
                }
              }

              p {
                // font-size: 0.625rem;
                font-size: 14px;
                color: $st-text-secondary;
                margin-bottom: 0;

                @media #{$medium} {
                  font-size: 12px;
                }
              }

              strong {
                // font-size: 14px;
                font-size: 16px;

                @media #{$medium} {
                  font-size: 14px;
                }
              }

              span {
                font-size: 10px;
                margin-left: 10px;
                color: $st-text-secondary;
              }

              small {
                font-size: $st-font14;
                font-weight: 400;

                @media #{$small} {
                  font-size: 14px;
                }
              }
            }

            .postimgage {
              width: 50px;
              float: left;

              img {
                width: 45px;
                height: auto;

                @media #{$medium} {
                  width: 40px;
                }
              }
            }

            @media #{$medium} {
              padding: 15px 10px;
            }
          }

          a.active {
            color: $st-text-primary;
            font-weight: 700;

            svg {
              color: $st-text-fourth;
            }
          }
        }

        &:last-child {
          border-bottom: 1px solid $st-border-fourth;
        }
      }


      .righticon {
        float: right;

        svg {
          color: $st-text-tenth ;
        }

        p {
          font-size: 0.625rem;
          color: $st-text-secondary;
          font-weight: 400;

          @media #{$small} {
            margin: -8px -9px 0 0;

          }

        }

        span {
          font-size: 0.5rem;
          background: $st-primary-bg;
          color: $st-text-ninth;
          border-radius: 8px;
          padding: 3px;

        }
      }



    }

    .writepostimage {
      .postimgage {
        width: 50px;
        height: auto;

        img {
          width: 45px;
          height: auto;
          border-radius: 50%;
        }
      }
    }
  }

  .msg-container {
    display: flex;
    flex-flow: column nowrap;
    padding: 20px;
    overflow-y: auto;
    clear: both;
    // min-height: 300px;
    // max-height: 390px;

    .private-msg {
      position: relative;
      display: block;
      word-wrap: break-word;
      color: #da2128;
      font-family: 'Roboto';
      border-radius: 5px;
      margin-bottom: 2.5vh;

      .msg-item {
        display: inline-flex;
        flex-direction: column;
        min-width: 100px;
        padding: 5px 10px;
        border-radius: 8px;

        p {
          color: $st-text-ninth;
          margin-bottom: 6px;
          font-size: 14px;
          text-align: left;

          @media #{$medium} {
            font-size: 12px;
          }

          // &.owner {
          //    font-size: 12px;
          //    margin-bottom: 0;
          //  @media #{$medium} {
          //     font-size: 10px;
          //   }
          // }
          &.userTimeStamp {
            margin-bottom: 0;
            color: $st-text-ninth;
            font-size: 14px;
            display: block;
            text-align: right;
          }
        }
      }

      &.private-msg-left {
        text-align: left;

        .msg-item {
          margin-right: auto;
          background-color:#ebe8e2;
         p{
          color: #000;
          font-size: 14px;
         }
        }
      }

      &.private-msg-right {
        text-align: right;

        .msg-item {
          margin-left: auto;
          background-color: $st-fifth-bg;
        }
      }
    }
  }
}