body {
  background: url("https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg");
  background-size: auto;
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.mainContainer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 900px;
}
.headerContainer {
  padding: 1rem 10vw 1rem 10vw;
  width: 100%;
  max-width: 900px;
  display: flex;
  gap: 12px;
}
#app {
  padding: 0 10vw;
  display: flex;
  align-items: start;
  justify-content: center;
  margin: 0;
  flex: 1;
}
.header {
  display: flex;
  align-items: start;
  justify-content: center;

  width: 100vw;
  background-color: #f0f2f5;
}
.headerInfo {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}
.headerName {
  color: #242e33;
  font-size: 16px;
  margin: 0;
}
.headerStatus {
  color: #667781;
  font-size: 12px;
  margin: 0;
}
.avatar {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.start {
  display: flex;
  justify-content: center;
  padding-top: 40px;
}
#today {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-color: white;
  margin: 0;
  padding: 6px;
  border-radius: 4px;
  color: #54656f;
  font-size: 12px;
}
.incomeMsgBubble {
  display: flex;
  translate: -20px;
  max-width: 100vw;
}

.incomeMsg {
  background-color: white;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0;
  padding: 6px;
  border-radius: 0px 4px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.triangle-left {
  width: 0;
  height: 0;
  border-top: 0px solid transparent;
  border-right: 20px solid white;
  border-bottom: 20px solid transparent;
}
.sentMsgBubble {
  display: flex;
  translate: -20px;
  justify-content: flex-end;
  translate: 20px;
}
.triangle-right {
  width: 0;
  height: 0;
  border-top: 0px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #d9fdd2;
}
.message {
  color: #111b21;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0.6rem;
  margin: 0;
}

.link {
  cursor: pointer;
  text-decoration: underline;
  color: #057eb5;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0.6rem;
  margin: 0;
}
.timestamp {
  color: #687983;
  font-size: 12px;
  align-self: end;
}
p {
  margin-top: 0;
}
textarea {
  border: none;
  background-color: #d9fdd2;
  min-height: 6rem;
  width: 60vw;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
  max-width: 500px;
}
input {
  width: 40vw;
  max-width: 340px;
  border: none;
  background-color: #d9fdd2;
  border-radius: 4px 0px 4px 4px;
  padding: 6px;
  color: #111b21;
  font-size: 16px;
}

::-webkit-input-placeholder {
  /* Edge */
  color: #77868f;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #77868f;
}

::-moz-placeholder {
  color: #77868f;
}

::-ms-input-placeholder {
  color: #77868f;
}

::placeholder {
  color: #77868f;
}

footer {
  flex: 0 0 auto;
  align-self: center;
  margin: 0px;
  display: flex !important;
  align-items: center;
  -moz-column-gap: 12px;
  column-gap: 12px;
  color: rgb(94, 94, 94);
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  padding: 24px 0px;
}

footer a {
  color: rgb(94, 94, 94);
}

.footer-image {
  margin: 0;
  width: 20px;
  height: auto;
  -webkit-filter: brightness(0) saturate(100%) invert(48%) sepia(0%)
    saturate(3606%) hue-rotate(137deg) brightness(68%) contrast(77%);
  filter: brightness(0) saturate(100%) invert(48%) sepia(0%) saturate(3606%)
    hue-rotate(137deg) brightness(68%) contrast(77%);
}

p {
  margin: 0;
}

.finalLink {
  max-width: 100%;
  overflow-wrap: anywhere;
}