/* ===== MENU ===== */
.pagina-messages .menu {
      float: left;
      height: 700px;
      width: 70px;
      background: #4768b5;
      background: -webkit-linear-gradient(#4768b5, #35488e);
      background: -o-linear-gradient(#4768b5, #35488e);
      background: -moz-linear-gradient(#4768b5, #35488e);
      background: linear-gradient(#4768b5, #35488e);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19);
    }

.pagina-messages .menu .items {
      list-style: none;
      margin: auto;
      padding: 0;
    }

.pagina-messages .menu .items .item {
      height: 70px;
      border-bottom: 1px solid #6780cc;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #9fb5ef;
      font-size: 17pt;
    }

.pagina-messages .menu .items .item-active {
      background-color: #5172c3;
      color: #fff;
    }

.pagina-messages .menu .items .item:hover {
      cursor: pointer;
      background-color: #4f6ebd;
      color: #cfe5ff;
    }

    /* === CONVERSATIONS === */

.pagina-messages .discussions {
      /* width: 35%; */
      min-height: 75vh;
      box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.2);
      overflow: auto;   
      overflow-x: hidden;   
      display: inline-block;
    }

.pagina-messages .discussions .discussion {
      min-width: 75px;
      height: 90px;
      background-color: #2d2b2b;
      border-bottom: solid 1px #000;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

.pagina-messages .discussions .discussion.notify_active::after{
    content: '';
    display: block;    
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ff0000;
    top: 15px;
    right: 35px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}    

.pagina-messages .discussions .search {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #e0e0e0;
    }

.pagina-messages .discussions .search .searchbar {
      height: 40px;
      background-color: #fff;
      width: 70%;
      padding: 0 20px;
      border-radius: 50px;
      border: 1px solid #eeeeee;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

.pagina-messages .discussions .search .searchbar input {
      margin-left: 15px;
      height: 38px;
      width: 100%;
      border: none;
      font-family: "Montserrat", sans-serif;
    }

.pagina-messages .discussions .search .searchbar *::-webkit-input-placeholder {
      color: #e0e0e0;
    }
.pagina-messages .discussions .search .searchbar input *:-moz-placeholder {
      color: #e0e0e0;
    }
.pagina-messages .discussions .search .searchbar input *::-moz-placeholder {
      color: #e0e0e0;
    }
.pagina-messages .discussions .search .searchbar input *:-ms-input-placeholder {
      color: #e0e0e0;
    }

.pagina-messages .discussions .message-active {
      min-width: 75px;
      height: 90px;
      background-color: #514d4d;
      border-bottom: solid 1px #000;
      padding: 0px 20px;
    }

.pagina-messages .discussions .discussion .photo {
      /* margin-left: 20px; */
      display: block;
      width: 45px;
      height: 45px;
      background: #e6e7ed;
      -moz-border-radius: 50px;
      -webkit-border-radius: 50px;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }

.pagina-messages .online {
      position: relative;
      top: 30px;
      left: 35px;
      width: 13px;
      height: 13px;
      background-color: #8bc34a;
      border-radius: 13px;
      border: 3px solid #fafafa;
    }

.pagina-messages .desc-contact {
      height: 43px;
      /* width: 50%; */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

.pagina-messages .discussions .discussion .name {
      margin: 0 0 0 20px;
      font-family: "Montserrat", sans-serif;
      font-size: 11pt;
      color: #ffffff;
    }

.pagina-messages .discussions .discussion .message {
      margin: 6px 0 0 20px;
      font-family: "Montserrat", sans-serif;
      font-size: 9pt;
      color: #ffffff;
    }

.pagina-messages .timer {
      margin-left: 15%;
      font-family: "Open Sans", sans-serif;
      font-size: 11px;
      padding: 3px 8px;
      color: #bbb;
      background-color: #fff;
      border: 1px solid #e5e5e5;
      border-radius: 15px;
 
    }

.pagina-messages .chat {
      /* width: calc(65% - 85px); */
      min-height: 80vh;
    }

.pagina-messages .header-chat {
      background-color: #1c1c1c;
      height: 90px;
      box-shadow: 0px 3px 2px #f07d004a;
      display: flex;
      align-items: center;
      z-index: 1;
      position: relative;      
}

.pagina-messages .chat .header-chat .icon {
      margin-left: 30px;
      color: #515151;
      font-size: 14pt;
    }

.pagina-messages .chat .header-chat .name {
      margin: 0 0 0 20px;
      text-transform: uppercase;
      font-family: "Montserrat", sans-serif;
      font-size: 13pt;
      color: #ffffff;
    }

.pagina-messages .chat .header-chat .right {
      position: absolute;
      right: 40px;
    }

.pagina-messages .chat .messages-chat {
      padding: 25px 35px 25px 35px;
      height: 47vh;
      overflow-y: auto;
      overflow: hidden;
      overflow-y: auto;
      
    }

.pagina-messages .chat .messages-chat .message {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }

.pagina-messages .chat .messages-chat .message .photo {
      display: block;
      width: 45px;
      height: 45px;
      background: #e6e7ed;
      -moz-border-radius: 50px;
      -webkit-border-radius: 50px;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }

.pagina-messages .chat .messages-chat .text {
    /* margin: 0 35px; */
    background-color: #202c33;
    padding: 15px;
    border-radius: 12px;
    color: #fff !important;
}

.pagina-messages .text-only {
      margin-left: 45px;
    }

.pagina-messages .time {
      font-size: 10px;
      color: lightgrey;
      margin-bottom: 10px;
      margin-left: 85px;
    }

.pagina-messages .response-time {
      float: right;
      margin-right: 40px !important;
    }

.pagina-messages .response {
      float: right;
      margin-right: 0px !important;
      margin-left: auto; /* flexbox alignment rule */
    }

.pagina-messages .response .text {
      background-color: #1c1c1c !important;
    }

.pagina-messages .footer-chat {
      width:100%;
      height: 80px;            
      background-color: #1c1c1c;
      border-top: 2px solid #eee;
      padding: 15px;
    }
.pagina-messages .footer-chat textarea,
.pagina-messages .footer-chat input{
    background-color: #4f4e4e;
    border: #4f4e4e;
    box-shadow: none !important;
    color: #fff;
    resize: none;
    height: 50px;
}
.btn-enviar{
    color: #fff;
    font-size: 34px;
    text-align: left;
    padding: 0;
    width: 100%;
    box-shadow: none !important;
}
.btn-enviar:focus,
.btn-enviar:hover{
    color: #fff;
    opacity: 0.6;
}
.pagina-messages .chat .footer-chat .icon {
      margin-left: 30px;
      color: #c0c0c0;
      font-size: 14pt;
    }

.pagina-messages .chat .footer-chat .send {
      color: #fff;
      background-color: #4f6ebd;
      position: absolute;
      right: 50px;
      padding: 12px 12px 12px 12px;
      border-radius: 50px;
      font-size: 14pt;
    }

.pagina-messages .chat .footer-chat .name {
      margin: 0 0 0 20px;
      text-transform: uppercase;
      font-family: "Montserrat", sans-serif;
      font-size: 13pt;
      color: #515151;
    }

.pagina-messages .chat .footer-chat .right {
      position: absolute;
      right: 40px;
    }

.pagina-messages .write-message {
      border: none !important;
      width: 60%;
      height: 50px;
      margin-left: 20px;
      padding: 10px;
    }

.pagina-messages .footer-chat *::-webkit-input-placeholder {
      color: #c0c0c0;
      font-size: 13pt;
    }
.pagina-messages .footer-chat input *:-moz-placeholder {
      color: #c0c0c0;
      font-size: 13pt;
    }
.pagina-messages .footer-chat input *::-moz-placeholder {
      color: #c0c0c0;
      font-size: 13pt;
      margin-left: 5px;
    }
.pagina-messages .footer-chat input *:-ms-input-placeholder {
      color: #c0c0c0;
      font-size: 13pt;
    }

.pagina-messages .clickable {
      cursor: pointer;
    }


/* width */
.pagina-messages .discussions::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.pagina-messages .discussions::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.pagina-messages .discussions::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
.pagina-messages .discussions::-webkit-scrollbar-thumb:hover {
  background: #555;
}    

.spinner-chat{
      margin: auto;
    display: block;
    top: 50%;
    position: relative;
}