body {
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #ffffff;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: 999;
}

.square {
  position: absolute;
  background-color: #ffffff;
  border-radius: 10px;
  /* add this line */
}

.chat_flow {
  overflow: auto;
  scroll-behavior: smooth;
}

.avatar {
  transition: transform .2s;
}

.avatar:hover {
  transform: scale(1.1);
  /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.userprofile {
  border-radius: 10px;
  width: 100%;
  transition: transform .2s;
  /* Animation */
  /* add this line */
}

.userprofile_overview {

  border-radius: 10px;
  width: 100%;
  transition: transform .2s;
  /* Animation */
  /* add this line */
}

.centered {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 100%;
  height: 20px;
}

#show_bg_2 {
  background-image:
    linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
    url('images/background.jpg');
  width: 80%;
  height: 400px;
  background-size: cover;
  color: white;
  padding: 20px;
}

.gradient-overlay {
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.748358718487395) 0%, rgba(0, 0, 0, 0) 52%);
}

.doc_flow {
  overflow: auto;
}


.gradient-class-1 {
  background: linear-gradient(0deg, rgba(73, 231, 233, 0.5) 0%, rgba(253, 187, 45, 0.5) 100%);
}

.gradient-class-2 {
  background: linear-gradient(0deg, rgba(253, 187, 45, 0.5) 0%, rgba(236, 143, 255, 0.5) 100%);
}

.gradient-class-3 {
  background: linear-gradient(0deg, rgba(183, 45, 253, 0.5) 0%, rgba(143, 255, 247, 0.5) 100%);
}

.gradient-class-4 {
  background: linear-gradient(0deg, rgba(45, 253, 203, 0.3) 0%, rgba(159, 191, 255, 0.3) 100%);
}

.collapsible {
  /* color: #444; */
  cursor: pointer;
  /* padding: 18px; */
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  /* font-size: 15px; */
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.collapsible:hover {
  /* background-color: #ccc; */
  opacity: 0.5;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  /* background-color: #f1f1f1; */
}

.collapsible:after {
  content: '\02795';
  /* Unicode character for "plus" sign (+) */
  font-size: 15px;
  color: white !important;
  float: right !important;
  margin-left: 5px;
}

.active:after {
  content: "\2796";
  /* Unicode character for "minus" sign (-) */
}