.dm-page {
  --full-height: calc(100vh - 42px - var(--header-padding-tb) - var(--header-padding-tb) - 16px);
  display: grid;
  grid-template-columns: 350px auto;
  height: var(--full-height);
  /* 100vh - header - padding */
  overflow: hidden;
  padding: 4px;
}

.dm-page > div:nth-child(1)::-webkit-scrollbar-track {
  background: transparent !important;
}

/* These should match what is in code too */
@media (max-width: 768px) {
  .dm-page {
    grid-template-columns: 100vw;
  }

  .dm-page > div:nth-child(1) {
    margin: 0 !important;
  }
}

@media (min-width: 1500px) {
  .dm-page {
    grid-template-columns: 400px auto 400px;
  }
}

/* User list */
.dm-page > div:nth-child(1) {
  overflow-y: auto;
  padding: 0 5px;
}

/* Chat window */
.dm-page > div:nth-child(2) {
  padding: 0 12px;
  margin: 0 4px;
  height: var(--full-height);
  background-color: var(--gray-superdark);
  border-radius: 16px;
}

/* Profile pannel */
.dm-page > div:nth-child(3) {
  margin: 16px;
}

.dm-page > div:nth-child(3) .avatar {
  margin-left: auto;
  margin-right: auto;
}

.dm-page > div:nth-child(3) .card {
  cursor: pointer;
}

.dm-page .new-chat {
  min-width: 100px;
}

.dm-page .chat-list > div.active {
  background-color: var(--gray-superdark);
  border-radius: 16px;
}

.new-chat-modal .user-list {
  max-height: 50vh;
  overflow-y: auto;
}

.new-chat-modal .user-list > div {
  padding: 8px 12px;
  cursor: pointer;
}

/* user in list selected */
.new-chat-modal .user-list > div.active {
  background-color: var(--gray-dark);
  border-radius: 16px;
}

.new-chat-modal .modal-body {
  padding: 24px 32px;
}

.new-chat-modal h2,
.new-chat-modal h3,
.new-chat-modal p {
  font-weight: 600;
  margin: 0;
}

.new-chat-modal h2 {
  font-size: 21px;
}

.new-chat-modal h3 {
  font-size: 16px;
}

.new-chat-modal p {
  font-size: 11px;
  letter-spacing: 1.21px;
  text-transform: uppercase;
}