@media (max-width: 767px) {

  @height:                      645px;
  @width:                       600px;
  @heightMessage:               60px;
  @heightRoomDetail:            60px;
  @heightBar:                   0px;
  @widthUsers:                  180px;
  @widthMessages:               (@width - @widthUsers - 4);

  @import "sized";
  @import "panels";


  .displayResponsive{display: block;}
  .LeftNavigationTDContainer {
    display: none;
  }

  .btn-home-responsive {
    display: inline-block;
  }

  .uiLeftContainerArea {
    width: 100%;
    float: none;
    padding: 5px 5px 0 0!important;
    -ms-transition-duration: .5s;
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    #chat-users {
      height: initial !important;
      margin: 0!important;
    }
  }

  .uiRoomUsersContainerArea {
        padding: 5px 0 0 0;
  }
    .room-users-collapsed{
        #room-users-collapse-bar {
          line-height: 400px!important;
          margin-left: -17px;
        }
    }
    .room-users-expanded{
        #room-users-collapse-bar {
          line-height: 400px!important;
          margin-left: 0;
        }
    }

  #menuButton{
    display: block;
    padding-top: 1px;
    }
     #chat-application {
        min-width: 320px;
        width: 100%;
        padding: 0;

        .uiGrayLightBox {
              margin: 0!important;
              -webkit-border-radius: 0;
              position: relative;
              padding: 3px 5px 8px;
              .btn-weemo-download {
                display: none!important;
              }

              .containerMoreItem {
                padding-right: 0px!important;
              }
        }
        .uiSearchInput {
                    display: none;
                    opacity: 0;
                    -ms-transition-duration: .5s;
                    -moz-transition-duration: .5s;
                    -webkit-transition-duration: .5s;
                    transition-duration: .5s;
                    .uiIconClose{display: none}
                      &.displayContent{
                          display: block;
                          opacity: 1;
                          position: absolute;
                          left: 1%;
                          right: 1%;
                          top: 0;
                          z-index: 1;
                          margin-top: 5px;
                          #chat-search{
                              width: 100%;
                              height: 44px;
                          }
                          .uiIconClose{
                            position: absolute;
                            right: 2%;
                            display: block;
                            top: 11px;
                            z-index: 99999;
                          }
                      }
                  }
        .uiBox {
          -webkit-border-radius: 0;
          -moz-border-radius: 0;
          border-radius: 0;
          margin: 0;
        }
        .uiExtraLeftContainer{
            display: block;
            width: 100%;
            float: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0;
            z-index: -1;

             &.displayContent{
                display: block;
                opacity: 1;
                z-index: 1;
                .uiExtraLeftGlobal{
                    right: 20%;
                    left: auto;
                }
             }
             .bg{
                position: fixed;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: rgba(73, 73, 73, 0.22);
             }
             .uiExtraLeftGlobal{
                background : #FFF;
                z-index: 1;
                width: 80%;
                height: 100%;
                position: fixed;
                top: 0;
                bottom: 0;
                left: auto;
                right: 104%;
                -ms-transition-duration: .5s;
                -moz-transition-duration: .5s;
                -webkit-transition-duration: .5s;
                transition-duration: .5s;

                -webkit-box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.45);
                -moz-box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.45);
                box-shadow: 2px 0px 5px 0px rgba(0, 0, 0, 0.45);

                .extraLeftTop, .extraLeftMedium{
                    position: relative;
                    display: block;
                    padding-left: 20px;
                    padding-bottom: 20px;
                }
                .extraLeftTop{
                    background: rgba(158, 158, 158, 0.19);
                    padding-top: 5px;
                    padding-bottom: 25px;
                    padding-right: 10px;
                    span.user_mail {
                        display: block;
                        color: #2f5e92;
                        margin-bottom: 2px;
                        margin: 10px 0;
                        overflow-wrap: break-word;
                    }
                    .actionIcon{padding: 2px 0}
                    .chat-status-chat{line-height: 17px;}
                    .actionIcon:hover, .actionIconSmall:hover{border: 0; background: none;}
                }
                .extraLeftMedium{border: 0}
                .label-user, .label-user-title{font-size: 17px}
                .avatar-user{
                    padding-right: 5px;
                    width: 59px;
                    margin-top: 20px;
                    .avatarCircle{
                        width:45px; height:45px;position: relative;
                        img{
                            width:45px; height:45px;
                            position: absolute;
                            top: 14%;
                            left: 13.5%;
                            transform: none;
                        }
                    }
                }
                .close {
                    font-size: 16px;
                    font-weight: bold;
                    opacity: .5;
                    font-family: arial;
                    z-index: 1;
                    position: absolute;
                    right: 8px;
                    top: 8px;
                    i{font-size: 16px;}
                }
                .ligne {
                    width: 100%;
                    margin: 10px 0!important;
                    font-size: 16px!important;
                    padding: 0;
                    i{font-size: 18px}
                    a{color: inherit;display: block;}
                }
                div#configButton{margin-bottom: 15px!important;}
                .uiActionWithLabel:hover,.uiActionWithLabel:focus, .uiActionWithLabel:active,
                .uiActionWithLabel:hover:active{
                    border-color: transparent;
                    box-shadow: none;
                    background: none;
                    color: #2f5e92;
                }
             }
             .clearfix{opacity: 0; margin: 0; padding: 0}
             .selectUserStatus{position: relative;height: 26px;margin: 38px 3px 0 0;}
             .full_name{
                 margin-top: 35px;
                 margin-bottom: 0;
                 width: 60%;
                 a{
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     max-width: 100%;
                 }
             }
        }
        .uiLeftContainerArea {
          width: 100%;
          float: none;
          position: absolute;
          top: 52px;
          left: 0;
          right: 0;

          -ms-transition-duration: .5s;
          -moz-transition-duration: .5s;
          -webkit-transition-duration: .5s;
          transition-duration: .5s;
          &.displayContent{
            display: block;
            opacity: 1;
          }

          #chat-users {
            height: initial !important;
            margin: 0!important;
          }
        }
        .uiGlobalRoomsContainer{
            position: fixed;
            top: -5px;
            right: -16px;
            left: 105%;
            padding-left: 5px;
            width: 100%;
            display: none;
            -ms-transition-duration: .5s;
            -moz-transition-duration: .5s;
            -webkit-transition-duration: .5s;
            transition-duration: .5s;
            &.displayContent{
                left: -5px!important;
                right: -5px!important;
                background: #FFF;
            }
        }
        .uiRightContainerArea {
          padding: 5px 0 0 0!important;
        }

        .uiRoomUsersContainerArea {
          width: 100%;


          #room-users-collapse-bar {
            line-height: 399px!important;
            display: none;
          }

          &:not(.room-users-expanded) {
            width :0px;
            .uiBox {
                #room-users-list{
                    .room-user{height: 40px}
                }
            }
            #room-users-collapse-bar {
              .uiIconArrowDefault:before {
                content: "\e75b";
              }
            }

            #room-users-header {
              #room-users-title {
                display: none;
              }

              #room-users-button {
                padding-right: 10px;
                li:nth-child(1){display: none}
              }
            }

            #room-users-list {
              .msUserAvatar {
                padding: 0;
                width: 100%;

                .msAvatarLink {
                  margin: 0 auto;
                }
              }

              .room-user-name, .room-user-status {
                display: none;
              }
            }
          }
        }
        .input-prepend.no-user-selection{
             label {
                a.label-user{
                     max-width: 199px;
                     overflow: hidden;
                     text-overflow: ellipsis;
                }
            }
        }
      }
      #menuButton, #searchButton, #searchButtonResp{
         display: block;
         i{font-size: 16px}
      }

      .msRow {
        .msRightInfo{
            min-width: 0;
            width: 100%;
            height: 19px;
        }
        .msAction {
            position: absolute;
            right: 1px;
            width: 277px;
            top: -15px;
            a{font-size: 10px}
        }
      }


    #chats{
     .offset1,.offset2 {
             margin-left: 4%;
             width: 90%;
     }
     span.channel-label{left:0!important}
     button#close-global-notif-config, #close-room-notif-config{
         position: relative;
         left: 0;
         right: 0;
         float: right;
         margin-bottom: 20px;
         margin-right: -10px;
     }


     .span6 {
         width: 100%;
         left: 0;
         right: 0;
         margin: 0;
         padding: 10px;
         h4{left: 0!important}
         .offset2.notif-manner, div#id2 {
             left: 0!important;
         }
     }


    }


    div#back, #closeListPart {
        float: left;
        width: 45px;
        height: 55px;
        line-height: 50px;
        text-align: center;
        font-weight: bold;
        font-size: 25px;
    }

    .avatarCircle{
        width: 28px; height: 28px;position: relative;
        img{
            width: 28px; height: 28px;
            position: absolute;
            top: 5px;
            left: 5px;
            transform: none;
        }
    }

    #room-users-button ul.nav.pull-right.uiDropdownWithIcon{display: none}
    .room-detail-avatar {
        float: left;
        margin-top: 6px;
        position: relative;
        }


    .room-detail{height: 54px;}
    .room-detail-avatar{margin-left: 0;margin-top: 6px;}
    .room-detail-fullname{
            padding-left: 5px;
            line-height: 55px;
    }
    .chat-team-button-dropdown{margin-top: 13px;}
    #configButton {
        position: relative;
        top: 10px;
        padding: 0;
        display: block;
        text-align: justify;
        width: 100%;
    }

    .actionIcon:active, .actionIconSmall:active, .actionIcon:focus, .actionIconSmall:focus, .actionIcon.active, .actionIconSmall.active{
        border:0; box-shadow: none; background: none;
    }
    .actionIcon:hover:active, .actionIconSmall:hover:active, .actionIcon:hover:focus, .actionIconSmall:hover:focus{
        border:0; box-shadow: none; background: none;
    }
    .uiActionWithLabel:hover:active, .uiActionWithLabel:hover:focus{border: 0!important; background: 0!important; box-shadow: none!important}
    div#team-modal-form, div#team-delete-window, .uiPopup.edit-modal.in{
            position: fixed!important;
            top: 10px!important;
            margin: 0!important;
            transform: none!important;
            left: 10px!important;
            right: 10px!important;
    }
    .uiMenuIcon{
        font-size: 16px;
            background: url(/eXoSkin/skin/images/themes/default/SearchInput/Search.png) no-repeat scroll right -1px;
            width: 20px;
            height: 20px;

    }


    .uiIconMenu:before {
        content: "\2630";
        font-weight: bolder;
        font-size: 20px;
    }
    .users-online .uiIconChatFavorite{display: block!important}
    .no-user-selection .uiActionWithLabel:hover{border:0!important; box-shadow: none!important; background: none!important;}
    div#submit {
        display: block;
        padding: 2px 10px 4px;
        margin-top: 4px;
        background: none;
        border: 0;
        &:hover, &:focus, &:active{border: 0; box-shadow: none; background: none}
        .uiIconEcmsDottedArrow {
            font-size: 8px;
        }
        i.uiIconShare{font-size: 17px;}
    }
    div#userRoomStatus {
            position: absolute;
            top: 20px;
            right: -2px;
        &.hide{display: none!important}
    }
    #configButtonResp{display: none}
    div#room-users-btn-offline{
        border: 0; background: none; box-shadow: none;
        i.uiIconChatMember.uiIconChatLightGray{color: #999}
        &.active{
            i.uiIconChatMember.uiIconChatLightGray{color: #2f5e92}
        }
    }
    .chat-room-config{
        .radio-input-text{width: 100%}
    }
    table.list-rooms {
        .room-link{
            max-width: 100%;
        }
    }
    tr.users-online{
        td{
            &:nth-child(2){
                 max-width :80%;
                 padding: 6px 0!important;
             }
        }
    }
    .edit-modal {
        textarea{width: 90%}
    }
    .pull-right > .dropdown-menu {
        right: 0;
        left: auto;
    }
    div#userRoomStatus {
            position: absolute;
            top: 20px;
            right: -2px;
        &.hide{display: none!important}
    }
}
@media (min-width: 768px) {
    div#submit {
       display: none;
    }
    div#userRoomStatus{display: none!important}
}