:root {
  --bodyBack:#fefefe;
  --normBorder:#ccc;
  --normHover:brightness(95%);
  --headerBorder:#E6CC9D;
  --headerBack:#EBDFCE;
  --headerText:#555;
  --headerTextShadow:#fff;
  --usersBack:#efefef;
  --scrollerBack:#eaeaea;
  --userAndTime:#606060;
  --userAndTimeMe:#777;
  --userAndTimeBot:#555;
  --userAndTimeBotBack:#FFFCED;
  --msgContainerBack:#FAF9F7;
  --msgContainerMeBack:#f3f3f3;
  --textBubble:#111;
  --textBubbleBack:#fefefe;
  --textBubbleBorder:#ddd;
  --textBubbleMe:#555;
  --textBubbleMeBack:#efefef;
  --msgActions:#333;
  --reactLink:#999;
}

body {
  font-family:'Segoe UI',helvetica,sans;
  padding-top:0px;
  margin-top:0px;
  background-color:var(--bodyBack);
}

#main_container {
  width:1000px;
  margin-left:auto;
  margin-right:auto;
  padding:0px;
  /* */
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
}

#header {
  border:1px solid var(--headerBorder);
  border-top:0px;
  padding:5px;
  background-color:var(--headerBack);
  width:982px;
  height:34px;
  margin:0px;
  text-align:center;
  /* */
  flex-shrink:0;
  flex-grow:0;
}

#header_text {
  font-size:18pt;
  margin-left:22px;
  letter-spacing:10px;
  font-weight:bold;
  vertical-align:top;
  color:var(--headerText);
  display:inline;
}

#users_and_scroller {
  width:1000px;
  /* */
  flex-basis:60vh;
  max-height:60vh;
  flex-grow:3;
  flex-shrink:3;
  /* */
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:stretch;
}

#user_list {
  padding:5px;
  border:1px solid var(--normBorder);
  border-bottom-left-radius:3px;
  background-color:var(--usersBack);
  border-top:none;
  width:120px;
  margin-right:0px;
  overflow:auto;
  /* */
  flex-grow:0;
  flex-shrink:0;
}

#scroller {
  padding:10px;
  border:1px solid var(--normBorder);
  border-left:none;
  border-top:none;
  border-bottom-right-radius:3px;
  background-color:var(--scrollerBack);
  width:841px;
  margin-left:0px;
  overflow:auto;
  /* */
  /* */
  flex-grow:0;
  flex-shrink:0;
}

.user_and_time_me {
  color:var(--userAndTimeMe);
  font-size:0.80em;
  padding-left:5px;
  padding-right:5px;
  margin-left:1px;
  margin-top:-1px;
  display:inline;
}

.msg_container {
  background-color:var(--msgContainerBack);
  border:1px solid var(--normBorder);
  border-radius:3px;
  padding:1px;
  padding-top:0px;
  opacity:0.0;
  display:inline-block;
}

.msg_container_me {
  background-color:var(--msgContainerMeBack);
  margin-left:14px;
}

.text_bubble {
  font-size:1.0em;
  color:var(--textBubble);
  background-color:var(--textBubbleBack);
  border:1px solid var(--textBubbleBorder);
  border-radius:3px;
  margin:0px 3px 3px 3px;
  padding:3px 7px;
  display:block;
}

.text_bubble_me {
  color:var(--textBubbleMe);
  background-color:var(--textBubbleMeBack);
}

.msg_actions {
  font-size:0.95em;
  padding:0px 3px;
  margin:2px 3px 3px 10px;
  float:right;
  color:var(--msgActions);
  cursor:pointer;
  border-radius:3px;
  display:inline-block;
}