.users {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  user-select: none;
}

.users_upper {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(197, 197, 197, 0.15);
  box-shadow: 0 2px 2px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 5.5px );
  -webkit-backdrop-filter: blur( 5.5px );
  border-radius: 10px;
}

.users_upper-header {
  height: var(--header-height);
  background-color: var(--header-bg-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  background: rgba(197, 197, 197, 0.15);
  box-shadow: 0 2px 2px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 5.5px );
  -webkit-backdrop-filter: blur( 5.5px );
}

/* .users_upper-header-textbox {
  align-self: flex-end;
} */

.users_upper-header-icons {
  display: flex;
  gap: 30px;
}

.users_upper-header img {
  width: var(--header-profile-image);
  height: var(--header-profile-image);
  border-radius: var(--svg-circle);
  cursor: pointer;
}

.users_upper-header svg {
  height: 2.5rem;
  width: 2.5rem;
  cursor: pointer;
}

.users_upper-search {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto 0;
}

.users_upper-search-input {
  width: var(--users-search-input-width);
  font-size: 1.8rem;
  font-family: inherit;
  border: none;
  outline: none;
  padding: .4rem 0 .8rem 4rem;
  border-radius: 1rem;
  background-color: var(--white1);
  z-index: 1;
}

.users_upper-search-input::placeholder {
  font-weight: 400;
  color: var(--gray);
  font-size: var(--font-md);
}

.users_upper-search-button {
  height: 3rem;
  width: 3rem;
  cursor: pointer;
  box-shadow: none;
  padding: 0.5rem;
  border-radius: var(--svg-circle);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: -3.5rem;
  z-index: 2;
}

.users_upper-search-button:hover {
  background-color: var(--hover-bgcolor);
}

.users_upper-search-button:active {
  background-color: var(--active-bgcolor);
}

.users_lower {
  overflow-y: auto;
  padding: 1rem 0 2rem 0;
  margin: 10px;

}

.users_lower-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.users_lower-contact {
  border-bottom: 1px solid rgba(173, 181, 189, 0.3);
  height: var(--users-contact-height);
  display: flex;
  align-items: center;
  margin: 0 2.5rem;
  cursor: pointer;
  flex-shrink: 0;
  font-size: var(--font-lg);
  font-weight: 600;
  gap: 1.2rem;
  border-radius: 10px;
  overflow: hidden;
  
}

.users_lower-contact:hover {
  background-color: var(--hover-bgcolor);
}

.active-chat:hover {
  background-color: #e66903;
}

.users_lower-contact-text {
  font-size: var(--font-xs);
  font-weight: normal;
}

.users_lower-contact svg,
.users_lower-contact img {
  height: 4.5rem;
  width: 4.5rem;
  border-radius: var(--svg-circle);
  margin-left: 1rem;
}

.active-chat {
  background-color: #da6200;
  color: #fefefe;
  border-radius: 10px;
  box-shadow: 0 2px 2px 0 rgba( 31, 38, 135, 0.37 );
}



.chat_action {
  height: var(--chat-action-height);
  background-color: var(--chat-action-bgcolor);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: auto;
  flex-shrink: 0;
  background: rgba(197, 197, 197, 0.15);
  box-shadow: 0 2px 2px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 5.5px );
  -webkit-backdrop-filter: blur( 5.5px );
  border-radius: 10px;
}

.chat_action svg {
  height: 2.8rem;
  width: 2.8rem;
  cursor: pointer;
}

.chat_action-emoji{
  fill: #ffffff;
}

.chat_action-emoji:hover {
  fill: #f59f00;
}

.chat_action-input {
  width: var(--chat-action-input-width);
  height: var(--chat-action-input-height);
  font-size: var(--font-sm);
  font-family: inherit;
  border: none;
  outline: none;
  padding: 0px;
  border-radius: .6rem;
  background-color: var(--white1);
}

.chat_action-send {
  margin-left: 0rem;
  width: 2.4rem !important;
  height: 2.4rem !important;
  fill: var(--primary-color);
}

.chat_action-send:hover {
  fill: var(--primary-dark);
}

.logo {
  width: 300px;
  height: 300px;
  text-align: center;
}