input, button, textarea {
  outline: none;
}

.left-nav::-webkit-scrollbar {
  width: 8px;
}

.left-nav::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.left-nav::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(63, 47, 91, 0.65);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

.left-nav::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(63, 47, 91, 0.65);
}

.init-check {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.sample-body {
  min-width: 960px;
  overflow-x: auto;
}

.left-nav {
  width: 300px;
  height: 100vh;
  max-height:400px;
  background: #1c6282; background-size: 260px;
  padding: 0 0 0 0; 
  float: left;
}
 

.left-nav-channel-select {
  padding: 20px 14px 0 14px;
}

.left-nav-button-guide {
  width: 36px;
  height: 36px;
  background: url("../images/sb/image-outerglow.svg") no-repeat center center transparent;
  float: right;
  margin-right: 7px;
}

.left-nav-button {
  width: 192px;
  height: 40px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  padding: 0 0 0 14px;
  font-family: 'Exo 2';
  font-weight: 400;
  font-size: 13px;
  color: #fff;
  line-height: 36px;
  border: 0;
  text-align: left;
}

.left-nav-open {
  background: url("../images/sb/btn-openchat-normal.svg") no-repeat 160px center #329fe6;
}
.left-nav-open:hover,
.left-nav-open:focus {
  background: url("../images/sb/btn-openchat-normal.svg") no-repeat 160px center #0e6bc4;
}

.left-nav-open--active,
.left-nav-open--active:hover,
.left-nav-open--active:focus {
  width: 212px;
  background: url("../images/sb/btn-openchat-close.svg") no-repeat 160px center #0e6bc4;
}

.left-nav-messaging {
  margin-top: 12px;
  background: url("../images/sb/btn-1on1groupchat-normal.svg") no-repeat 160px center #32c5e6;
}
.left-nav-messaging:hover,
.left-nav-messaging:focus {
  background: url("../images/sb/btn-1on1groupchat-normal.svg") no-repeat 160px center #0f9ab8;
}

.left-nav-messaging--active,
.left-nav-messaging--active:hover,
.left-nav-messaging--active:focus {
  width: 212px;
  background: url("../images/sb/btn-openchat-close.svg") no-repeat 160px center #0f9ab8;
}

.left-nav-channel-section {
  height: calc(100% - 72px);
  margin-top: 0;
  overflow-y: auto;
}

.left-nav-channel-empty {
  width: 192px;
  height: 72px;
  padding: 18px 0 0 14px;
  margin-left: 14px;
  border: 1px dashed #7f6da0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;  
  font-weight: 500;
  font-size: 14px;
  color: #7f6da0;
  line-height: 18px;
  text-align: left;
}

.left-nav-channel-title {
  width: 100%;
  height: 30px;  
  font-weight: 500;
  font-size: 11px;
  color: #fff;
  line-height: 30px;
  padding: 0 14px;
}
.title-messaging {
  font-weight:300;
  font-size:22px;
  margin:20px 0;
}

.left-nav-channel {
  width: 100%;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  padding: 10px 0 10px 44px;
  cursor: pointer;
  margin:0 !important;
}

.left-nav-channel-lastmessage {
  font-size: 13px;
  color: #fff;
}
.left-nav-channel-lastmessagetime {
  font-size: 13px;
  color: #bbb;
  text-align: left;
  padding-right: 20px;
}

.left-nav-channel-open {
  background: url("../images/sb/icon-menu-channel-off.svg") no-repeat 14px center transparent;
  margin-bottom: 4px;
}
.left-nav-channel-open:hover {
  background: url("../images/sb/icon-menu-channel-off.svg") no-repeat 14px center #463c66;
}

.left-nav-channel-open--active {
  background: url("../images/sb/icon-menu-channel-on.svg") no-repeat 14px center #362f4f;
  color: #fff;
}
.left-nav-channel-open--active:hover {
  background: url("../images/sb/icon-menu-channel-on.svg") no-repeat 14px center #3f2f5b;
  color: #fff;
}

.left-nav-channel-open--active:hover > .left-nav-channel-leave,
.left-nav-channel-messaging--active:hover > .left-nav-channel-leave,
.left-nav-channel-group--active:hover > .left-nav-channel-leave {
  display: block;
}
.left-nav-channel-leave {
  display: none;
  width: 17px;
  height: 30px;
  float: right;
  margin-right: 20px;
  background: url("../images/sb/btn-leave-menu-over.svg") no-repeat center center transparent;
}
.left-nav-channel-leave--active {
  display: block;
  background: url("../images/sb/btn-leave-menu-click.svg") no-repeat center center transparent;
}

.left-nav-channel-messaging {
  background: url("../images/sb/icon-menu-chat-off.svg") no-repeat 14px center transparent;
}
.left-nav-channel-messaging:hover {
  background: url("../images/sb/icon-menu-chat-off.svg") no-repeat 14px center #463c66;
}

.left-nav-channel-messaging--active {
  background: url("../images/sb/icon-menu-chat-on.svg") no-repeat 14px center #362f4f;
  color: #fff;
}

.left-nav-channel-group {
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: left top;
  background-color: transparent;
  background-image: url("../images/sb/icon-menu-group-off.svg");
  background-position-x: 10px;
  background-position-y: 15px;
  margin-bottom: 14px;
  min-height: 35px;
}
.left-nav-channel-group:hover {
  background-repeat: no-repeat;
  background-size: 24px;
  background-color: #237499;
  background-position-x: 10px;
}

.left-nav-channel-group--active,.left-nav-channel-group--active:hover {
  background-repeat: no-repeat;
  background-size: 24px;
  background-color: #fff;
  background-position-x: 10px;
  color: #333;
}

.left-nav-channel-group--active .left-nav-channel-lastmessage {   
    color: #333;
}

.left-nav-channel__unread {
  width: 20px;
  height: 16px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background: #f5429c;
  
  font-weight: 400;
  font-size: 11px;
  color: #fff;
  line-height: 16px;
  float: right;
  text-align: center;
  margin: 7px 20px 0 0;
}

.left-nav-user {
  width: 300px;
  height: 72px;
  position: absolute;
  bottom: 0;
  background: #1c6282;
  
}

.left-nav-user-icon {
  width: 30px;
  height: 72px;
  position: relative;
  background: url("../images/sb/image-profile.svg") no-repeat center center;
  margin-left: 10px;
  float: left;
  background-size:30px;
}

.left-nav-user-title {
  width: auto;
  height: auto;
  position: relative;
  font-weight: 500;
  color: #7f6da0;
}

.left-nav-user-nickname {
  width: auto;
  height: auto;
  position: relative;
  font-weight: 600;
  color: #fff;
}

.left-nav-login-user {
  width: auto;
  height: auto;
  position: relative;
  float: left;
  margin-top: 26px;
  margin-left: 12px;
}


.right-section {
  width: calc(100% - 300px);
  height: 100vh;
  max-height:400px;
  float: left;
}

.right-section__modal-bg {
  display: none;
  width: calc(100% - 220px);
  height: 100%;
  z-index: 1;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
}

.chat-top {
  width: 100%;
  height: 72px;
  background: #fff;  
  padding: 16px 20px 0 20px;
}

.chat-top__title {
  display: none;
  padding-left: 50px;
  background: url("../images/sb/icon-openchat-title.svg") no-repeat left center;  
  font-weight: 500;
  font-size: 18px;
  color: #3CBDBD;
  line-height: 40px;
  float: left;
  background-size: 40px !important;
}
.chat-top__title--messaging {
  background: url("../images/sb/icon-1on1chat-title.svg") no-repeat left center;
}
.chat-top__title--group {
  background: url("../images/sb/icon-groupchat-title.svg") no-repeat left center;
}

.chat-top-button {
  display: none;
  float: right;
  height: 30px;
}

.chat-top__button {
  width: 30px;
  height: 30px;
  padding: 4px;
  border: 1px solid #8f9fae;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  cursor: pointer;
  float: left;
}
.chat-top__button:hover {

}

.chat-top__button-hide {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  border-right: 0;

  display: none;
  -webkit-border-top-left-radius: 0;
  border-top-left-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  border-bottom-left-radius: 0;
  background: url("../images/sb/btn-hide-normal.svg") no-repeat center center #f7f8fc;
}
.chat-top__button-hide:hover {
  background: url("../images/sb/btn-hide-over.svg") no-repeat center center #f7f8fc;
}

.chat-top__button-leave {
  -webkit-border-top-left-radius: 0;
  border-top-left-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  border-bottom-left-radius: 0;
  background: url("../images/sb/btn-leave-normal.svg") no-repeat center center #f7f8fc;
}
.chat-top__button-leave:hover {
  background: url("../images/sb/btn-leave-over.svg") no-repeat center center #f7f8fc;
}
.chat-top__button-leave--active {
  background: url("../images/sb/btn-leave-over.svg") no-repeat center center #e8eaef;
}

.chat-top__button-member {
  background: url("../images/sb/btn-memberlist-normal.svg") no-repeat center center #f7f8fc;
}
.chat-top__button-member__right {
  -webkit-border-top-right-radius: 0;
  border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.chat-top__button-member__all {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  border-right: 0;
  border-left: 0;
}
.chat-top__button-member:hover {
  background: url("../images/sb/btn-memberlist-over.svg") no-repeat center center #f7f8fc;
}
.chat-top__button-member--active {
  background: url("../images/sb/btn-memberlist-over.svg") no-repeat center center #e8eaef
}

.chat-top__button-invite {
  display: none;
  width: 78px;
  height: 30px;
  -webkit-border-top-right-radius: 0;
  border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  border-bottom-right-radius: 0;
  font-family: 'Exo 2';
  font-weight: 400;
  font-size: 12px;
  color: #8f9fae;
  line-height: 28px;
  background: url("../images/sb/btn-invite-normal.svg") no-repeat 8px center #f7f8fc;
  padding: 0 0 0 26px;
}
.chat-top__button-invite:hover {
  background: url("../images/sb/btn-invite-over.svg") no-repeat 8px center #f7f8fc;
}
.chat-top__button-invite--active,
.chat-top__button-invite--active:hover {
  color: #747f8d;
  background: url("../images/sb/btn-invite-normal.svg") no-repeat 8px #e8eaef;
}

.chat-empty {
  width: 100%;
  height: calc(100% - 72px);
   
  padding: 70px 0;
  font-family: 'Exo 2';
  font-weight: 400;
  text-align: center;
  color: #abb8c4;
}
.chat-empty__tile {
  height: auto;
  padding: 0;
  font-size: 24px;
}
.chat-empty__icon {
  width: 100%;
  height: 66px;
  padding: 0;
  background: url("../images/sb/img-empty.svg") no-repeat center center transparent;
  margin: 20px 0;
}

#post-messages-is-mymwc .chat-empty__icon .default-loader-wrapper{ display:none;}
.page-id-profile-is-mymwc .chat-empty__icon{ background:none;}
.page-id-profile-is-mymwc .chat-empty__icon .default-loader-wrapper{ display:block; padding:0;}

.chat-empty__desc {
  height: auto;
  padding: 0;
  font-size: 14px;
}

.chat {
  display: none;
  width: 100%;
  height: calc(100% - 72px);
  border-top: 1px solid rgba(171, 184, 196, 0.5);
}

.chat-canvas {
  width: 100%;
  height: calc(100% - 71px);   
  overflow-y: auto;
  padding: 28px 0 0 0;
}

.chat-canvas__list {
  width: 100%;
  min-height: 24px;
  background: transparent;
  
  font-weight: 400;
  font-size: 16px;
  color: #60768b;
  padding: 0 20px;
}
.chat-canvas__list:hover {
  
}
 

.chat-canvas__list-notice {
  width: 100%;
  height: 32px;
  min-height: 24px;
  background: transparent;  
  font-weight: 400;
  font-size: 16px;
  color: #60768b;
  line-height: 24px;
}

.chat-canvas__list-system {
  width: 100%;
  height: 24px;
  font-weight: 400;
  font-style: italic;
  color: #60768b;
  background: #e8ecef;
  padding: 0 20px;
  margin: 6px 0;
}

.chat-canvas__list-broadcast {
  width: 100%;
  font-weight: 400;
  font-style: normal;
  color: #333e4a;
  background: #d7eef7;
  padding: 0 20px;
  margin: 6px 0;
}

.chat-canvas__list-name {
  cursor: pointer;
  font-weight: 600;
  color: #333e4a;
  vertical-align: top;
}
.chat-canvas__list-name__user {
  color: #4f398f;
}
.chat-canvas__list-separator {
  padding: 0 6px;
  color: #60768b;
  vertical-align: top;
  font-weight: 400;
}
.chat-canvas__list,.chat-canvas__list-name{ width:100%; float:left;}
.chat-canvas__list-name{ font-weight:400 !important; margin-top:15px; }
.chat-canvas__list-text {
  cursor: pointer;
  max-width: 80% !important;  
  word-wrap: break-word;
  font-weight: 400 !important;
  font-size: 14px;
  color: #333;
  float:left;
  width:auto !important;
  background:#e4e7eb;
  border-radius: 10px;
  padding: 5px 15px;
  position:relative;
}
.bottom-msg{ width:100%; float:left;}
.bottom-msg span{ float:left;font-size: 11px; margin: 3px 0 15px 0;}

.chat-canvas__list-text:after{ position:absolute; content:''; left:10px; transform:rotate(30deg); bottom:-10px; width:0; height:0; border-top:20px solid #e4e7eb; border-right:6px solid transparent; border-bottom:0 none; border-left:6px solid transparent; }

.is_me .chat-canvas__list,.is_me .chat-canvas__list-name{ text-align:right;}
.is_me .chat-canvas__list-text{ float:right;color: #fff; background:#09F;}
.is_me .chat-canvas__list-text:after{ position:absolute; content:''; left:auto; right:10px; transform:rotate(-30deg); bottom:-10px; width:0; height:0; border-top:15px solid #09F; border-right:6px solid transparent; border-bottom:0 none; border-left:6px solid transparent; }
.is_me .bottom-msg span{ float:right;}

.chat-canvas__list-readreceipt {
  font-size: 10px;
  color: white;
  display: none;
  background-color: #75daeb;
  border-radius: 10px;
  /*border: 5px;*/
  width: 14px;
  height: 14px;
  line-height: 130%;
  vertical-align: middle;
  text-align: center;
  margin: 0 0 0 5px;
  display:none !important;
}
.chat-canvas__list-text-file {
  width: 44px;
  margin-right: 6px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background: #e2eff7;
  font-family: 'Exo 2';
  font-weight: 400;
  font-size: 12px;
  color: #2a78c2;
  text-align: center;
}
 
.chat-canvas__list-file {
  border-left: 4px solid #abb8c4;
  padding-left: 10px;
  cursor: pointer;
  margin: 6px 0 10px 0;
}
.chat-canvas__list-file-img {
  max-width: 400px;
  max-height: 300px;
}

.chat-input {
  width: 100%;
  height: 51px;
  padding: 8px 20px 4px 20px;
  background: #fff;
  position:relative;
}

.chat-input-file {
  width: 40px;
  height: 40px;
  float: left;
  padding: 10px;
  margin-bottom: 3px;
  border: 1px solid #abb8c4;
  -webkit-border-top-left-radius: 2px;
  border-top-left-radius: 2px;
  -webkit-border-bottom-left-radius: 2px;
  border-bottom-left-radius: 2px;
  background: url("../images/sb/btn-upload.svg") no-repeat center center;
  cursor: pointer;
}
.chat-input-file:hover {
  background: url("../images/sb/btn-upload.svg") no-repeat center center #f7f8fc;
}

.file-upload {
  background: url("../images/sb/loading-rectagular.gif") no-repeat center center #f7f8fc;
}
label.chat-input-file.file-upload {
  background: url("../images/sb/loading-rectagular.gif") no-repeat center center #f7f8fc;
}

.chat-input-text {
  width: calc(100% - 35px);
  height: 40px;
  float: left;
}

.chat-input-typing {
  display: none;
  
  font-weight: 400;
  font-style: italic;
  font-size: 11px;
  color: #60768b;
  margin: 0;
  padding: 0 20px;
}

::-webkit-input-placeholder { /* WebKit browsers */
  font-weight: 300;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  font-weight: 300;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  font-weight: 300;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  font-weight: 300;
}
.chat-input-text__field {
  width: 100%;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  
  font-weight: 400;
  font-size: 14px;
  color: #8f9fae;
  overflow-y: auto;
  resize: none;
  padding: 10px 20px 0 20px;
  border: 1px solid #abb8c4; 
  -webkit-border-top-right-radius: 2px;
  border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 2px;
  border-bottom-right-radius: 2px;
  background: #f7f8fc;
  margin-top:8px;
}

.chat-input-text__field:focus {
  color: #60768b;
  background: #fff;
}

.submit-chat{ position:absolute; top:16px; right:0; width:40px; height:40px;-webkit-border-radius: 50%;
  -moz-border-radius: 50%; border-radius: 50%; -moz-transition:all .25s ease-in-out 0s; -webkit-transition:all .25s ease-in-out 0s; transition:all .25s ease-in-out 0s; background:#1c6282;cursor:pointer;}
.submit-chat:hover{ background:#189f9f; }
.submit-chat i{color:#fff; font-size:20px; line-height:40px; text-align:center;  }

.modal-guide-create {
  width: 316px;
  height: 148px;
  position: absolute;
  top: 90px;
  left: 230px;
  border: 0;
  background: url("../images/sb/img-create.svg") no-repeat center center transparent;
  padding: 20px 0 16px 0;
  text-align: center;
  z-index: 2;
}

.modal-guide-create__title {
  
  font-weight: 500;
  font-size: 16px;
  color: #32c5e6;
}

.modal-guide-create__desc {
  
  font-weight: 400;
  font-size: 14px;
  color: #fff;
  margin: 10px 0;
}

.modal-guide-create__button {
  width: 76px;
  height: 32px;
  background: #32c5e6;
  border: 1px solid #0692b0;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  font-family: 'Exo 2';
  font-weight: 400;
  font-size: 14px;
  color: #fff;
}
.modal-guide-create__button:hover,
.modal-guide-create__button:focus {
  background: #328fe6;
  border: 1px solid #1a64ab;
}

.modal-guide-leave {
  display: none;
  width: 62px;
  height: 42px;
  position: absolute;
  top: 52px;
  right: 16px;
  border: 0;
  background: url("../images/sb/img-leave.svg") no-repeat center center transparent;
  
  font-weight: 500;
  font-size: 14px;
  color: #fff;
  line-height: 46px;
  text-align: center;
  z-index: 5;
}
.chat-top__button-leave:hover + .modal-guide-leave {
  display: block;
}

.modal-guide-member {
  display: none;
  width: 132px;
  height: 42px;
  position: absolute;
  top: 52px;
  right: 18px;
  border: 0;
  background: url("../images/sb/img-current.svg") no-repeat center center transparent;
  
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  line-height: 46px;
  text-align: center;
  z-index: 5;
}
.chat-top__button-member:hover + .modal-guide-member {
  display: block;
}
.chat-top__button-member--active:hover + .modal-guide-member {
  display: none;
}

.modal-guide-user {
  display: none;
  width: 132px;
  height: 42px;
  position: absolute;
  top: 52px;
  right: 42px;
  border: 0;
  background: url("../images/sb/img-member.svg") no-repeat center center transparent;
  
  font-weight: 500;
  font-size: 14px;
  color: #fff;
  line-height: 46px;
  text-align: center;
  z-index: 5;
}
.chat-top__button-invite:hover + .modal-guide-user {
  display: block;
}
.chat-top__button-invite--active:hover + .modal-guide-user {
  display: none;
}

.modal-open-chat {
  display: none;
  width: 300px;
  height: 100vh;
  position: absolute;
  background: #fff;
  top: 0;
  left: 220px;
  z-index: 2;
}

.modal-open-chat-top {
  height: 72px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(171, 184, 196, 0.5);
}

.modal-open-chat-top__search {
  width: 250px;
  height: 32px;
  padding: 0 34px 0 12px;
  background: url("../images/sb/icon-search.svg") no-repeat 220px center #fff;
  
  font-weight: 400;
  font-size: 14px;
  color: #abb8c4;
  border: 1px solid #abb8c4;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.modal-open-chat-top__search:hover {
  background: url("../images/sb/icon-search.svg") no-repeat 220px center #fafcff;
  border: 1px solid #abb8c4;
}

.modal-open-chat-top__search:focus {
  background: url("../images/sb/icon-search.svg") no-repeat 220px center #fff;
  border: 1px solid #6742d6;
  color: #60768b;
}

.modal-open-chat-list {
  width: 100%;
  height: calc(100% - 163px);
  overflow-y: auto;
}

.modal-open-chat-list__item {
  width: 100%;
  height: 36px;
  background: 20px center transparent;
  
  font-weight: 400;
  font-size: 16px;
  color: #60768b;
  line-height: 36px;
  padding: 0 0 0 10px;
  cursor: pointer;
  overflow-y: hidden;
  word-break: break-all;
}
.modal-open-chat-list__item:hover {
  background: 20px center #e4ebef;
  font-weight: 600;
  color: #333e4a;
}
.modal-open-chat-list__item img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.modal-open-chat-more {
  display: none;
  width: 100%;
  height: 72px;
  border-top: 1px solid rgba(171, 184, 196, 0.5);
  
  font-weight: 400;
  font-size: 14px;
  color: #60678b;
  line-height: 36px;
  text-align: center;
  padding: 12px 15px;
}
.modal-open-chat-more__icon {
  width: 10px;
  height: 10px;
  background: url("../images/sb/btn-more-normal.svg") no-repeat center center;
  margin-left: 6px;
  display: inline-block;
}
.modal-open-chat-more:hover,
.modal-open-chat-more:focus {
  color: #32c5e6;
}
.modal-open-chat-more:hover > .modal-open-chat-more__text > .modal-open-chat-more__icon,
.modal-open-chat-more:focus > .modal-open-chat-more__text > .modal-open-chat-more__icon {
  background: url("../images/sb/btn-more-over.svg") no-repeat center center;
}

.modal-open-chat-more__text {
  width: 270px;
  height: 46px;
  margin: auto;
  
  font-weight: 400;
  font-size: 14px;
  color: #60678b;
  line-height: 46px;
  text-align: center;
  background: #fff;
  cursor: pointer;
}

.modal-open-chat-more:hover > .modal-open-chat-more__text,
.modal-open-chat-more:focus > .modal-open-chat-more__text {
  color: #32c5e6;
  background: #f5f6f7;
}

.modal-messaging {
  display: none;
  width: 300px;
  height: 100vh;
  position: absolute;
  background: #fff;
  top: 0;
  left: 220px;
  z-index: 2;
}
.modal-messaging-top {
  width: 100%;
  min-height: 48px;
  padding: 16px 20px 0 20px;
  
  font-weight: 500;
  border-bottom: 1px solid rgba(171, 184, 196, 0.5);
}
.modal-messaging-top__title {
  font-size: 16px;
  color: #333e4a;
}
.modal-messaging-top__desc {
  font-style: italic;
  font-size: 14px;
  font-weight: 300;
  color: #abb8c4;
}

.modal-messaging-top__btn{
  position: absolute;
  right: 10px;

  border: 1px solid #4e4273;
  color: #4e4273;
  background-color: #f7f8fc;
  background: url("../images/sb/icon-create-channel.svg") no-repeat 20px center #fff;
  background-position: center center;
  width: 26px;
  height: 26px;
}

.modal-messaging-list {
  width: 100%;
  height: calc(100% - 164px);
  overflow-y: auto;
}
.modal-messaging-list__item {
  width: 100%;
  height: 36px;
  padding: 0 20px 0 50px;
  background: url("../images/sb/icon-userlist.svg") no-repeat 20px center #fff;
  
  font-weight: 400;
  font-size: 16px;
  color: #60768b;
  line-height: 36px;
  cursor: pointer;
}
.modal-messaging-list__item:hover,
.modal-messaging-list__item:focus {
  font-weight: 600;
  background: url("../images/sb/icon-userlist.svg") no-repeat 20px center #e4ebef;
}
.modal-messaging-list__icon {
  width: 16px;
  height: 36px;
  float: right;
  background: url("../images/sb/btn-check-normal.svg") no-repeat center center;
}
.modal-messaging-list__item:hover > .modal-messaging-list__icon,
.modal-messaging-list__item:focus > .modal-messaging-list__icon {
  background: url("../images/sb/btn-check-over.svg") no-repeat center center;
}
.modal-messaging-list__icon--select,
.modal-messaging-list__item:hover > .modal-messaging-list__icon--select,
.modal-messaging-list__item:focus > .modal-messaging-list__icon--select {
  background: url("../images/sb/btn-check-click.svg") no-repeat center center;
}
.modal-messaging-more {
  width: 100%;
  height: 46px;
  
  font-weight: 400;
  font-size: 14px;
  color: #60678b;
  line-height: 46px;
  text-align: center;
  cursor: pointer;
}
.modal-messaging-more:hover,
.modal-messaging-more:focus {
  color: #32c5e6;
}
.modal-messaging-more__icon {
  width: 10px;
  height: 10px;
  background: url("../images/sb/btn-more-normal.svg") no-repeat center center;
  margin-left: 6px;
  display: inline-block;
}
.modal-messaging-more:hover > .modal-messaging-more__icon,
.modal-messaging-more:focus > .modal-messaging-more__icon {
  background: url("../images/sb/btn-more-over.svg") no-repeat center center;
}
.modal-messaging-bottom {
  width: 100%;
  height: 72px;
  border-top: 1px solid rgba(171, 184, 196, 0.5);
  text-align: center;
  padding: 13px 0;
}
.modal-messaging-bottom__button {
  width: 270px;
  height: 46px;
  border: 1px solid #0692b0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-family: 'Exo 2';
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  background: #32c5e6;
}
.modal-messaging-bottom__button:hover,
.modal-messaging-bottom__button:focus {
  border: 1px solid #1a64ab;
  background: #328fe6;
}

.modal-leave-channel, .modal-hide-channel, .modal-confirm, .modal-input {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;
  z-index: 3;
  -webkit-transition: opacity .15s linear;
  -o-transition: opacity .15s linear;
  transition: opacity .15s linear;
}

.modal-leave-channel-card, .modal-hide-channel-card, .modal-confirm-card, .modal-input-card {
  width: 386px;
  height: auto;
  margin: 200px auto;
  background: #fff;
  opacity: 1;
  border: 1px solid #abb8c4;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.modal-leave-channel-title, .modal-hide-channel-title, .modal-confirm-title, .modal-input-title {
  
  font-weight: 600;
  font-size: 18px;
  color: #333e4a;
  margin-top: 15px;
  padding: 0 20px;
}

.modal-leave-channel-desc, .modal-hide-channel-desc, .modal-confirm-desc, .modal-input-desc {
  
  font-weight: 400;
  font-size: 14px;
  color: #60768b;
  margin-top: 10px;
  padding: 0 20px;
}

.modal-leave-channel-separator, .modal-hide-channel-seprator, .modal-confirm-seprator, .modal-input-separator {
  padding-top: 14px;
  border-bottom: 1px solid rgba(171, 184, 196, 0.5);
}

.modal-leave-channel-bottom, .modal-hide-channel-bottom, .modal-confirm-bottom, .modal-input-bottom {
  padding: 10px 20px;
  text-align: right;
}

.modal-leave-channel-button, .modal-hide-channel-button, .modal-confirm-button, .modal-input-button {
  width: 68px;
  height: 28px;
  text-align: center;
  font-family: 'Exo 2';
  font-weight: 400;
  font-size: 12px;
  border: 1px solid;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.modal-leave-channel-close, .modal-hide-channel-close, .modal-confirm-close, .modal-input-close {
  color: #60678b;
  border: 1px solid #abb8c4;
  background: #fafcff;
}
.modal-leave-channel-close:hover, .modal-hide-channel-close:hover, .modal-confirm-close:hover, .modal-input-close:hover,
.modal-leave-channel-close:focus, .modal-hide-channel-close:focus, .modal-confirm-close:focus, .modal-input-close:focus {
  color: #6742d6;
  border: 1px solid #6742d6;
}

.modal-leave-channel-submit, .modal-hide-channel-submit, .modal-confirm-submit, .modal-input-submit {
  width: 58px;
  color: #fff;
  border: 1px solid #0692b0;
  background: #32c5e6;
}
.modal-leave-channel-submit:hover, .modal-hide-channel-submit:hover, .modal-confirm-submit:hover, .modal-input-submit:hover,
.modal-leave-channel-submit:focus, .modal-hide-channel-submit:focus, .modal-confirm-submit:focus, .modal-input-submit:focus {
  border: 1px solid #1a64ab;
  background: #328fe6;
}

.modal-input-box {
  width: 100%;
  padding: 0 20px 0 20px;
}

.modal-input-box-elem {
  width: 100%;
  background-color: #F8F8F8;
  border-radius: 3px;
  border: 1px solid #dedede;
  height: 30px;
  padding-left: 12px;
}

.modal-member {
  display: none;
  width: 250px;
  height: 410px;
  position: absolute;
  top: 56px;
  right: 48px;
  background: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #abb8c4;
  z-index: 2;
  -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.3);
  -moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.3);
  box-shadow: 0 5px 10px 0 rgba(0,0,0,0.3);
}

.modal-member-title {
  width: 100%;
  height: 38px;
  font-family: 'Exo 2';
  font-weight: 400;
  font-size: 12px;
  color: #60768b;
  border-bottom: 1px solid #abb8c4;
  border-bottom: 1px solid rgba(171, 184, 196, 0.5);
  padding: 0 20px;
  line-height: 38px;
}

.modal-member-list {
  width: 100%;
  height: 340px;
  
  font-weight: 500;
  font-size: 14px;
  color: #60768b;
  padding: 0 0 14px 0;
  margin-top: 14px;
  overflow-y: auto;
}

.modal-member-list__item {
  padding: 0 20px 14px 20px;
}

.modal-member-list__icon img {
  width: 23px;
  height: 23px;
  float: left;
  margin-right: 10px;
}

.modal-member-list__name {
  width: auto;
  height: 23px;
  line-height: 23px;
  color: #cdcdcd;
}

.modal-member-list__name.online {
  color: #60768b;
}

.modal-member-list__lastseenat {
  text-align: right;
  font-size: 10pt;
  color: #cdcdcd;
}

.modal-invite {
  display: none;
  width: 386px;
  height: 410px;
  position: absolute;
  top: 56px;
  right: 80px;
  background: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #abb8c4;
  z-index: 2;
  -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.3);
  -moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.3);
  box-shadow: 0 5px 10px 0 rgba(0,0,0,0.3);
}

.modal-invite-title {
  width: 100%;
  height: 38px;
  font-family: 'Exo 2';
  font-weight: 400;
  font-size: 12px;
  color: #60768b;
  border-bottom: 1px solid rgba(171, 184, 196, 0.5);
  padding: 0 20px;
  line-height: 38px;
}

.modal-invite-top {
  width: 100%;
  height: 80px;
  padding: 16px 20px;
  
  font-weight: 500;
}
.modal-invite-top__title {
  font-size: 16px;
  color: #333e4a;
  display: block;
}
.modal-invite-top__desc {
  font-style: italic;
  font-size: 14px;
  font-weight: 300;
  color: #abb8c4;
}

.modal-invite-list {
  width: 100%;
  height: 234px;
  
  font-weight: 500;
  font-size: 14px;
  color: #60768b;
  padding: 0;
  margin-bottom: 6px;
  overflow-y: auto;
}

.modal-invite-bottom {
  width: 100%;
  height: 38px;
  padding: 10px 20px;
  text-align: right;
  border-top: 1px solid rgba(171, 184, 196, 0.5);
}

.modal-invite-bottom__button {
  width: 68px;
  height: 28px;
  border: 1px solid #0692b0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-family: 'Exo 2';
  font-weight: 400;
  font-size: 12px;
  color: #ffffff;
  background: #32c5e6;
}
.modal-invite-bottom__button:hover,
.modal-invite-bottom__button:focus {
  border: 1px solid #1a64ab;
  background: #328fe6;
}

@media (max-width: 1000px) {	
.sample-body {
    min-width: 0;
    overflow-x: visible;
}
.left-nav {
    width: 100%;
    height: auto;
	max-height: 480px;
	overflow: auto;
}

.left-nav-user{ display:none;}

.right-section {
    width: 100%;
    height: auto;
    float: left;
    position: relative;
	display:none;
} 

.left-nav-channel-title {
    width: 100%;
    height: 20px;
    line-height: 20px;
    padding: 0 20px;
}
.chat{ background:#fff;}
.chat-canvas__list{ padding:0;}
.chat-input { padding: 8px 20px 4px 0px;}

.chat-top{ display:none;}
.mobile-chats .left-nav-channel{ display: none; }
.mobile-chats .left-nav-channel.mobile-chat-active{ display: block; }
.mobile-chats .right-section{ display: block; }

.mobile-chats .left-nav-channel-title{text-align: right; cursor:pointer; }
.mobile-chats .left-nav-channel-title:before{ color:#fff; font-family: 'FontAwesome';content: '\f104';transition:all .25s ease-in-out 0s; line-height: 20px;font-size: 24px; float:left;}
.chat-canvas { max-height:280px;}
}