@bg: #666;
@border: 1px solid #939393;

/*
右侧好友界面*/
#friend_has_new {
  position: absolute;
  top: 8px;
  right: 8px;
  background: red;
  border-radius: 15px;
  text-align: center;
  color: white;
  width: 10px;
  height: 10px;
  display: none;
}

.btn-pull {
  position: fixed;
  border: @border;
  background: #9C9C9C;
  z-index: 9999;
  padding: 13px 12px 5px 10px;
  margin-right: 0;
  bottom: 33px;
  right:50px;
  width: 48px;
  height: 49px;
  &:hover{
    border: 1px solid #717070;
    background: #838383;

  }
  i {
    color: white;
    font-size: 24px;
  }
}

.friend_panel {
  position: fixed;
  top: 50%;
  margin-top: -250px;
  right: 0;
  height: 500px;
  z-index: 999;
  background :#fff;
  border: #ccc solid 1px;
  #right_panel_main {

    border-right: 0;

    #friend_panel_main {
      width: 150px;
      top: 0px;
      bottom: 0px
    }
    #session_panel_main {
      width: 150px;
    }
    h2 {
      border-top-left-radius: 3px;
      font-size: 16px;
      color: white;
      text-align: center;
      padding-top: 5px;
      margin-bottom: 0;

      display: block;
    }
    .session_spliter {
      height: 0px;
      border-bottom: 1px solid #ccc;
    }
  }

  .friend_list {
    margin-left: 15px;
    margin-right: 15px;
    padding: 0;
    li {
      list-style: none;
      padding: 10px;
      a {
        color: #333 !important;
        display: inline-block;
        margin-bottom: 10px;
        position: relative;
        .badge_new {
          position: absolute;
          top: 0;
          right: -15px;
          background: red;
          border-radius: 15px;
          text-align: center;
          color: white;
          width: 10px;
          height: 10px;
          display: inline-block;
        }
      }
    }
    .active {
      background: @bg;
    }
  }
  .session_more {
    height: 38px;
    color: white !important;

    .active {
      border: 0 !important;
    }
    .tab_chat {
      border-top: 0;
      border-left: 0;
      border-bottom-left-radius: 3px;
      margin-top: 1px;
    }
    .tab_friend {
      border-top: 0;
      border-right: 0;
      margin-top: 1px;
    }
    .btn_session_more {
      color: white !important;
      text-align: center;
      padding: 8px 0;
      margin-left: 0;
      margin-right: 0;
      display: block;
      margin-top: 1px;
    }
    .active {
      color: #029775 !important;
      background: rgb(255, 255, 255);
    }
  }
}

#chat_box {
  z-index: 1001;
}

.chat-board {
  border-left: 1px solid #ccc;
  border-bottom: 0;
}

.chat_panel {
  .chat-left {
    background: #fff;
    padding: 10px 10px;
    border-bottom: solid 1px #ccc;
  }
  .chat-list {
    padding: 0;
    li {
      list-style: none;

      .btn-close{
        display: none;
        position: absolute !important;
        top: 0;
        right: 16px;
      }
      a {
        .avatar-img{
          margin: 5px;
        }
        font-size: 14px;
        color:#666;
        .talk-name{
          line-height: 46px;
        }
        &:hover{
          background: darken(#fff,5%);
          .btn-close{
            display: inline-block;
          }
        }
        position: relative;
        display: block;
      }
    }
    .active {
      background: darken(#fff,5%);
    }
  }
  position: fixed;
  right: 210px;
  bottom: 30px;
  background: white;
  border: 1px solid #ccc;
  width: 520px;
  height: 460px;
  .panel_title {
    .title {
      padding-left: 74px;
      line-height: 34px;
      width: 270px;
    }
    position: relative;
    background: #F4F4F4;
    height: 35px;
    border-bottom: 1px solid #ccc;
    .control_btns {
      a {
        display: inline-block;
        margin: 7px;
      }
    }
  }
  .chat_avatar {
    position: absolute;
    top: -32px;
    left: 5px;
    width: 64px;
    border: 1px solid #ccc;
    padding: 1px;
    background: white;
  }

  .talk-body {
    background: white;
    padding: 0;
    margin-top: 0;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    height: 320px;

    .talk-avatar {
      width: 48px;
      max-width: 200%;
      margin-right: 10px;
    }
    .chat_bubble {
      .bubble_sharp {

        background: url(../images/bubble_left_chat.png);
      }
      .talk_bubble {
        border-color: rgb(72, 184, 122);
        background: rgb(72, 184, 122);
        color: white;
      }
    }
  }

  .send_box {
    padding: 0 10px;
    textarea {

    }
  }
  #scrollArea_chat {
    padding-bottom: 20px;
  }
}









