/* (A) ENTIRE PAGE */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

/* (B) LAYOUT */
body {
  padding: 0; margin: 0;
  width: 100vw; height: 100vh;
  display: flex;
  align-items: stretch;
}
#uLeft, #uRight,#uMid { overflow: auto; }
#uLeft {
  width: 170px;
  color: #fff;
  background: #3a3a3a;
}
#uMid {
   flex-direction: column-reverse; 
  flex-grow: 1;
  background: #fafafa;
}
#uRight {
    width: 400px;
  
  background: #dcdcdc;
}
/* (C) LEFT : USERS LIST */
/* (C1) SHARED */
#uNow, .uRow { padding: 10px; }

/* (C2) CURRENT USER */
#uNow {
  font-weight: 700;
  background: #1e1e1e;
  text-align: center;
}
#uNow img {
  width: 80px;
  border-radius: 50%;
  margin-bottom: 5px;
}

/* (C3) USERS LIST */
.uRow {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #545454;
}
.uRow:hover {
  cursor: pointer;
  background: #2e2e2e;
}
.uRow.now {
  background: #890e0e;
  font-weight: 700;
}
.uName { flex-grow: 1; }
.uClear { flex-grow: 1; font-size: 10px;color:green;}
.uUnread {
  text-decoration: none;
  display: inline-block;
  color: #fff;
  background: #1e1e1e;
  padding: 5px;
  margin-right: 5px;
}

/* (D) RIGHT : MESSAGES */
/* (D1) SEND MESSAGE FORM */
#uSend {
  display: none;
  padding: 15px;
  background: #eee;
}
#uSend input { padding: 10px; }
#uSend input[type=text] {
  flex-grow: 1;
  border: 0;
}
#uSend input[type=button] {
    color: #fff;
    background: #890e0e;
    border: 0;
    margin-top: 30px;
    height: 36px;
    border-radius: 5px;
    margin-left: 10px;
}

/* (D2) MESSAGES - SHARED */
.mRow {
  display: flex;
  margin: 5px;
}
.mOut { flex-direction: row; }
.mIn { flex-direction: row-reverse; }
.mRowMsg {
  position: relative;
  padding: 5px;
  border-radius: 5px;
}
.mDate { color: #a7a7a7;
        font-size: 0.7em; 
        padding-left: 10px;
        padding-right: 10px;}
.mSender{
    padding: 10px;
    color:black;
    font-size: 1.3em;
    font-weight: bold;
}
.mTxt {
   
  padding: 3px 5px;
  font-size: 1.1em;
}

/* (D3) MESSAGES - SENT */
.mOut .mRowMsg {
  margin-left: 10px;
  background: #dde5ff;
}
.mOut .mTxt { color: #212491; }
.mOut  { color: #9295fd; }

/* (D3) MESSAGES - RECEIVED */
.mIn .mRowMsg {
  margin-right: 10px;
  text-align: right;
  background: #ffe7e7;
}
.mIn .mTxt { color: #c52020; }
.mIn  { color: #dfa9a9; }

/* (D4) SPEECH BUBBLE TAIL */

#uBottom{
    bottom: 1px;    
    position: sticky;
    top:90%;
    z-index: 1000;
}
#uSender{background: #eee;
    top:-1px;
    z-index: 1000;
    position: sticky;}
.loader {
  background-color: transparent;
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid #969696;
  border-bottom: 4px solid #969696;
  width: 35px;
  height: 35px;
  -webkit-animation: spin 0.8s linear infinite;
  animation: spin 0.8s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  99% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  99% { transform: rotate(360deg); }
}