:root {
  --dark-color: #48372d;
  --heading-color: #222222;
  --font-color: #555555;
  --font-white: #ffffff;
  --font-light: #888888;
  --font-xlight: #f0f0f0;
  --font-ccc: #cccccc;
  --text-muted: #9a9a9a;
  --border-color: #e2e2e2;
  --card-color: #ffffff;
  --white-color: #ffffff;
  --body-color: #ffffffff;
  --box-shadow: #c7c1c1;
  --box-shadow-light: #ececec;
  --font-hc-color: #888888;
  --bg-hc-color: #323a45;
}
[data-theme="dark"] {
  --dark-color: #ffffff;
  --heading-color: #c0c0c0;
  --font-color: #c7c7c7;
  --font-white: #ffffff;
  --font-light: #888888;
  --font-xlight: #333638;
  --font-ccc: #cccccc;
  --text-muted: #80858a;
  --border-color: #3b3f42;
  --card-color: #26282a;
  --white-color: #000000;
  --body-color: #222426;
  --box-shadow: #585858;
  --box-shadow-light: #323536;
  --font-hc-color: #888888;
  --bg-hc-color: #ffffff;
}
[data-theme="high-contrast"] {
  --dark-color: #ffffff;
  --heading-color: #ffffff;
  --font-color: #ffffff;
  --font-white: #ffffff;
  --font-light: #000000;
  --font-xlight: #ffffff;
  --font-ccc: #111111;
  --text-muted: #ffffff;
  --border-color: #ffffff;
  --card-color: #000000;
  --white-color: #000000;
  --body-color: #000000;
  --box-shadow: #333333;
  --box-shadow-light: #333333;
  --font-hc-color: #ffffff;
  --bg-hc-color: #000000;
}
[class="theme-purple"] {
  --primary-color: #7954ad;
  --primary-color2: #7b54b1;
  --primary-color3: #a37adb;
  --secondary-color: #e76886;
  --secondary-color2: rgb(223, 126, 148);
  --link-color: #48372d;
  --primary-gradient: linear-gradient(45deg, #7b54b1, #e76886);
}
[class="theme-blue"] {
  --primary-color: #2929b9;
  --primary-color2: #4343d3;
  --primary-color3: #6c6cff;
  --secondary-color: #f99006;
  --secondary-color2: #f92f47;
  --link-color: #87b70a;
  --primary-gradient: linear-gradient(45deg, #2929b9, #87b70a);
}
[class="theme-cyan"] {
  --primary-color: #48372d;
  --primary-color2: #33bab0;
  --primary-color3: #8bcec9;
  --secondary-color: #fb5934;
  --secondary-color2: #00acee;
  --link-color: #e76886;
  --primary-gradient: linear-gradient(45deg, #59c4bc, #48372d);
}
[class="theme-green"] {
  --primary-color: #38c172;
  --primary-color2: #249d57;
  --primary-color3: #187741;
  --secondary-color: #0957c3;
  --secondary-color2: #5589d2;
  --link-color: #fed500;
  --primary-gradient: linear-gradient(45deg, #38c172, #249d57);
}
[class="theme-orange"] {
  --primary-color: #ffa901;
  --primary-color2: #ff7f00;
  --primary-color3: #fbc200;
  --secondary-color: #600489;
  --secondary-color2: #9439bc;
  --link-color: #38c172;
  --primary-gradient: linear-gradient(45deg, #ffa901, #600489);
}
[class="theme-blush"] {
  --primary-color: #ff6a4a;
  --primary-color2: #f5856d;
  --primary-color3: #fbc200;
  --secondary-color: #87b70a;
  --secondary-color2: #aad736;
  --link-color: #056cdb;
  --primary-gradient: linear-gradient(45deg, #ff6a4a, #aad736);
}
[class="theme-red"] {
  --primary-color: #f40000;
  --primary-color2: #f92c2c;
  --primary-color3: #f14f4f;
  --secondary-color: #030886;
  --secondary-color2: #252bcf;
  --link-color: #c7e203;
  --primary-gradient: linear-gradient(45deg, #f40000, #252bcf);
}
.chat-app .people-list {
  width: 280px;
  position: absolute;
  left: 0;
  top: 0;
  padding: 20px;
  z-index: 7;
}
.chat-app .chat {
  margin-left: 280px;
  border-left: 1px solid var(--border-color);
}
.people-list {
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.people-list .chat-list li {
  padding: 10px 15px;
  list-style: none;
  border-radius: 3px;
}
.people-list .chat-list li:hover,
.people-list .chat-list li.active {
  background: var(--primary-color);
  color: var(--font-white);
  cursor: pointer;
}
.people-list .chat-list li .name {
  font-size: 15px;
}
.people-list .chat-list img {
  width: 45px;
  border-radius: 50%;
}
.people-list img {
  float: left;
  border-radius: 50%;
}
.people-list .about {
  float: left;
  padding-left: 8px;
}
.people-list .status {
  opacity: 0.7;
  font-size: 13px;
}
.chat .chat-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
}
.chat .chat-header img {
  float: left;
  border-radius: 40px;
  width: 40px;
}
.chat .chat-header .chat-about {
  float: left;
  padding-left: 10px;
}
.chat .chat-history {
  padding: 20px;
  border-bottom: 2px solid var(--card-color);
}
.chat .chat-history ul {
  padding: 0;
}
.chat .chat-history ul li {
  list-style: none;
  margin-bottom: 30px;
}
.chat .chat-history ul li:last-child {
  margin-bottom: 0px;
}
.chat .chat-history .message-data {
  margin-bottom: 15px;
}
.chat .chat-history .message-data img {
  border-radius: 40px;
  width: 40px;
}
.chat .chat-history .message-data-time {
  color: var(--text-muted);
  padding-left: 6px;
  font-size: 12px;
}
.chat .chat-history .message {
  color: var(--bg-hc-color);
  padding: 18px 20px;
  line-height: 26px;
  font-size: 16px;
  border-radius: 7px;
  display: inline-block;
  position: relative;
}
.chat .chat-history .message:after {
  bottom: 100%;
  left: 7%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: var(--white-color);
  border-width: 10px;
  margin-left: -10px;
}
.chat .chat-history .my-message {
  background: var(--font-xlight);
}
.chat .chat-history .my-message:after {
  bottom: 100%;
  left: 30px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: var(--font-xlight);
  border-width: 10px;
  margin-left: -10px;
}
.chat .chat-history .other-message {
  background: var(--secondary-color);
  color: var(--font-white);
  text-align: right;
}
.chat .chat-history .other-message:after {
  border-bottom-color: var(--secondary-color);
  left: 93%;
}
.chat .chat-message {
  padding: 20px;
}
.online,
.offline,
.me {
  margin-right: 2px;
  font-size: 8px;
  vertical-align: middle;
}
.online {
  color: #42d182;
}
.offline {
  color: #fe2053;
}
.me {
  color: #0c85e0;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
@media only screen and (max-width: 767px) {
  .chat-app .people-list {
    height: 465px;
    width: 100%;
    overflow-x: auto;
    background: var(--white-color);
    left: -400px;
    display: none;
  }
  .chat-app .people-list.open {
    left: 0;
  }
  .chat-app .chat {
    margin: 0;
  }
  .chat-app .chat .chat-header {
    border-radius: 0.55rem 0.55rem 0 0;
  }
  .chat-app .chat-history {
    height: 300px;
    overflow-x: auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .chat-app .chat-list {
    height: 650px;
    overflow-x: auto;
  }
  .chat-app .chat-history {
    height: 600px;
    overflow-x: auto;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  .chat-app .chat-list {
    height: 480px;
    overflow-x: auto;
  }
  .chat-app .chat-history {
    height: calc(100vh - 350px);
    overflow-x: auto;
  }
}