:root {
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(29, 80%, 58%);
  --first-color-light: hsl(29, 80%, 70%);
  --black-color: #fff;
  --text-color: hsl(29, 8%, 65%);
  --body-color: hsl(29, 100%, 99%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Poppins", sans-serif;
  --h3-font-size: 1.125rem;
  --smaller-font-size: 0.75rem;
}
* {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
  }
  /* .home_signedIn {
    display: none;
  } */
  
  .home_notsignedIn {
    display: none;
  }
  .main {
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  .main h4 {
    font-size: 1.3em;
  }
  .main p {
    margin: 0;
    max-height: 3em;
    overflow: hidden;
  }
  .main header {
    background-color: grey;
    color: white;
    padding: 7px 20px;
  }
  #appLogo {
    width: 50px;
    height: 50px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
  }
  .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .title_left {
    display: flex;
    flex: 1;
  }
  .title h1 {
    margin-top: 7px;
    font-size: 32px;
    margin-left: 10px;
  }
  #invite_logo {
    height: 40px;
    width: 40px;
    cursor: pointer;
    margin-right: 10px;
    font-size: 30px;
  }
  .main .container {
    height: 100vh;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .main .container .users_window {
    float: left;
    width: 30vw;
    height: 90vh;
    color: black;
    background-color: lightgrey;
    /* overflow: hidden; */
  }
  .card__border2 {
    width: 50px;
    height: 50px;
    border: 2px solid var(--first-color);
    border-radius: 50%;
    display: grid;
    place-items: center;
  }
  .card__border2 span {
    font-size: 30px;
    color: var(--first-color);
  }
  #userdpMain {
    border-radius: 50%;
    cursor: pointer;
  }
  
  .container .users_window .users_head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 10px;
    align-items: center;
  }
  
  .users_window {
    overflow: auto;
  }
  .container .users_window .users_list img {
    margin: 10px 0 10px 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .users_data_hanny {
    flex: 1;
    margin: 10px;
    display: flex;
    flex-direction: column;
  }
  .users_data_hanny h4 {
    padding: 0;
    margin: 0;
  }
  .users_data_hanny p {
      color: black;
      opacity: 0.8;
  }
  
  .container .users_window .users_list .users_listInformation_hanny,
  .users_listInformation_rishap,
  .users_listInformation_parangat {
    display: flex;
    border-bottom: 1px solid grey;
    cursor: pointer;
  }
  .main .container .chat_window_hanny,
  .chat_window_rishap,
  .chat_window_parangat {
    width: 70vw;
    height: 100vh;
    display: inline-block;
  }
  .chats{
    padding: 10px;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .container .chat_window_hanny .chat_header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px;
    border-bottom: 1px solid black;
    margin-bottom: 10px;
  }
  .dp {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
  }
  .dp img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-right: 5px;
    cursor: pointer;
  }
  .container .chat_window_hanny .chat_middle .message_incoming {
    background-color: lightgray;
    padding: 10px 10px;
    border-radius: 10px;
    margin-bottom: 15px;
    max-width: 400px;
    word-wrap: break-word;
    max-height: 150px;
    overflow-y: auto;
    display: table;
    position: relative;
  }
  .container .chat_window_hanny .chat_middle .message_outgoing {
    margin-left: auto;
    background-color: #d65471;
    color: white;
    padding: 10px 10px;
    border-radius: 10px;
    margin-bottom: 15px;
    max-width: 420px;
    word-wrap: break-word;
    
    overflow-y: auto;
    display: table;
    position: relative;
  }
  .container .chat_window_hanny .chat_middle button {
    border: none;
    background-color: #d65471;
    cursor: pointer;
    padding: 5px;
    margin-top: 2px;
  }
  .content {
    padding: 0;
  }
  .container .chat_window_hanny .chat_footer {
    padding: 6px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border: 1px solid black;
    border-radius: 10px;
  }
  .container .chat_window_hanny .chat_footer textarea {
    font-size: 16px;
    border: none;
    flex: 1;
    outline: none;
  }
  .container .chat_window_hanny .chat_footer button {
    font-size: 16px;
    padding: 5px 10px;
    margin-left: 5px;
    border: none;
    background-color: white;
    cursor: pointer;
  }
  #send_img {
      cursor: pointer;
      height: 30px;
      width: 30px;
  }
  .dialog-box img {
    height: 140px;
    width: 250px;
    border-radius: 5px;
  }
  .whiteboard_card img {
      height: 140px;
      width: 280px;
      border-radius: 5px;
  }
  .whiteboard_card h4 {
      color: white;
      margin: 0;
  }
  .scribble_card {
    width: 300px;
    height: 300px;
  }
  .scribble_card img {
    width: 300px;
    height: 300px;
    border-radius: 5px;
  }
  .video-container {
    position: absolute;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
  }
  .video-container p {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
    color: white;
  }
  .video-container video {
    top: 10%;
    left: 10%;
    width: 90%;
    height: 90%;
    outline: none;
  }
  
  .expand_plus_btn_container {
    background-color: rgba(0, 0, 0, 0.9);
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
  }
  .expand_plus_btn_container img {
    padding: 10px;
    height: 60px;
    width: 60px;
    cursor: pointer;
  }
  .expand_plus_btn_container i{
    padding: 10px;
    height: 70px;
    width: 70px;
    cursor: pointer;
    color: #d75372;
    font-size: 50px;
  }
  .expand_img {
    background-color: white;
    border: 1px solid #d65471;
    border-radius: 50%;
    margin-bottom: 7px;
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
  }
  
  .expand_img:hover {
    border: 2px solid #d65471;
  }
  .expands {
    margin-right: 40px;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .expands p{
    color: white;
  }
  .expands input {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
  }
  .expand_buttons {
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .close_plus_btn {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    color: white;
    font-size: 20px;
  }
  
  .userdp_expand {
    width: 170px;
    background-color: darkgrey;
    right: 0;
    top: 4.5rem;
    position: fixed;
    opacity: 0;
    border-radius: 10px;
  }
  .userdp_expand h4 {
    font-size: 20px;
  }
  .userdp_expand i {
    font-size: 25px;
    margin-right: 10px;
  }
  #profile h4 {
    margin: 0;
    padding: 0;
  }
  .userdp_expand div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5em 4em;
    cursor: pointer;
    /* padding-left: 0.5em; */
    padding-right: 7.5em;
  }
  .userdp_expand div:hover {
    background-color: #d65471;
    color: white;
    border-radius: 10px;
  }
  .userdp_expand p {
    position: absolute;
    font-size: 20px;
    cursor: pointer;
    color: white;
    float: right;
    right: 8px;
    top: 2px;
  }
  .audios {
    position: fixed;
    margin: 300px;
  }
  .profile_expand_group {
    background-color: darkgrey;
    margin-top: 64px;
    width: 30%;
    position: absolute;
    height: 90%;
    opacity: 0;
    overflow: auto;
  }
  #profile_close_group {
    cursor: pointer;
    font-size: 20px;
}
  .profile_expand {
    background-color: darkgrey;
    margin-top: 64px;
    width: 30%;
    position: absolute;
    height: 90%;
    opacity: 0;
  }
  #profile_close {
    cursor: pointer;
    font-size: 20px;
}
.profile_expand img {
    height: 300px;
    width: 300px;
    border-radius: 50%;
    border: none;
    margin: auto;
}
.profile_expand_group img {
    height: 300px;
    width: 300px;
    border-radius: 50%;
    border: none;
    width: 300px;
}
  .profile_expand div {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d65471;
    color: white;
  }
  .profile_expand_group div {
    overflow: auto;
    background-color: #d65471;
    color: white;
  }
  .user_profile_expand {
    background-color: darkgrey;
    top: 67px;
    position: absolute;
    right: 0;
    opacity: 0;
  }
  .user_profile_expand_header {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .user_profile_expand_header h4 {
    margin: 0;
    padding: 0;
  }
  .user_profile_expand div {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d65471;
    color: white;
    padding: 0.5em;
  }
  .user_profile_expand img {
    height: 200px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    width: 200px;
  }
  #user_profile_close {
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    margin: 0;
  }
  #usernameProfile {
    margin: 0;
    padding: 0;
  }
  #upload {
    opacity: 0;
    margin-top: 150px;
    margin-left: 60px;
    width: 300px;
    height: 300px;
  }
  .message_down_arrow {
    display: block;
    font-size: 12px;
    cursor: pointer;
    top: 2px;
    right: 2px;
    position: absolute;
  }
  .message_expand {
    opacity: 0;
    position: absolute;
    padding: 2px;
    background-color: lightgrey;
    border-radius: 10px;
    right: 27px;
    top: 135px;
  }
  .message_expand h4 {
    font-weight: 500;
  }
  .message_expand div {
    margin: 7px;
    cursor: pointer;
  }
  .forward_message {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
  }
  
  .forward_message_header {
    background-color: #d65471;
    color: white;
    border-bottom: 1px solid grey;
    display: flex;
    padding: 10px;
  }
  .forward_message_container {
    width: 400px;
    height: 400px;
    margin-top: 150px;
    margin-left: 400px;
    background-color: white;
  }
  .forward_message_middle div {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid grey;
    cursor: pointer;
  }
  .forward_message_middle img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .forward_message_footer {
    background-color: #d65471;
    color: white;
    border-bottom: 1px solid grey;
    display: flex;
    padding: 5px;
    margin-top: 150px;
  }
  .forward_message_footer button {
    border: none;
    color: white;
    font-size: 18px;
    margin-left: 160px;
    background-color: #d65471;
    cursor: pointer;
  }
  .delete_message {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
  }
  .delete_message_container {
    border-radius: 10px;
    width: 250px;
    height: 200px;
    margin-top: 200px;
    margin-left: 500px;
    background-color: white;
  }
  .delete_message_container .cancel_message_button {
    margin-left: 15px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    width: 100px;
    border: 1px solid black;
    height: 30px;
    outline: none;
    background-color: white;
  }
  .delete_message_container .delete_message_button {
    border-radius: 5px;
    cursor: pointer;
    margin-left: 15px;
    margin-top: 40px;
    font-size: 16px;
    width: 100px;
    height: 30px;
    border: none;
    outline: none;
    background-color: #d65471;
    color: white;
  }
  .reply_message {
    display: none;
    opacity: 0;
    position: absolute;
    padding: 0;
    margin: 0;
  }
  .reply_message_container {
    border-radius: 10px;
    padding: 6px;
    background-color: lightgrey;
    padding-left: 20px;
    height: 60px;
    width: 890px;
    margin-top: 528px;
    margin-left: 420px;
    display: flex;
  }
  .invite_expand {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    color: white;
  }
  .invite_expand_links {
    padding: 10px;
    background-color: white;
    color: #555;
    border-radius: 10px;
    border: none;
    box-shadow: 0 8px 8px -4px #d65471, 0 -8px 8px -4px #d65471;
}
.invite_expand_main_right h3 {
    cursor: pointer;
    padding: 5px;
    padding: 0;
    margin: 0;
}
.create_space h3 {
  margin: 0;
  padding: 0;
}
.invite_expand_header {
    background-color: #d65471;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    height: 40px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding-left: 20px;
    padding-right: 20px;
}
.invite_expand_header h4 {
  padding: 0;
  margin: 0;
  font-size: 20px;
}
#invite_expand_close {
    cursor: pointer;
    font-size: 20px;
    color: white;
    padding: 0;
    margin: 0;
}
#create_space_close {
    cursor: pointer;
    font-size: 20px;
    padding-right: 10px;
    color: white;
    padding: 0;
    margin: 0;
}
.create_space {
  border: none;
  border-radius: 10px;
  background-color: white;
  color: #555;
  padding: 10px;
  cursor: pointer;
  box-shadow: 0 8px 8px -4px #d65471, 0 -8px 8px -4px #d65471;
}
.invite_expand_main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
}
.invite_expand_main_header {
  display: flex;
  justify-content: center;
  align-items: center;
}
.invite_expand_main h1 {
  color: #d65471;
  padding: 0;
  margin: 0;
}
.invite_expand_main_container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    
}
.invite_expand_main_left img{
   height: 250px;
   width: 250px;
}
.invite_expand_main_right {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}
.create_space_expand {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0,0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}
.create_space_expand_container {
    background-color: white;
    width: 400px;
    height: 300px;
    position: relative;
    border-radius: 25px;
}
.create_space_expand_container_header {
    padding-right: 15px;
    padding-left: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d65471;
    color: white;
    height: 40px;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
}
.create_space_expand_container_header h4 {
  margin: 0;
  padding: 0;
  font-size: 20px;
}
.create_space_expand_container h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 30px;
}
.create_space_expand_container input {
  border: none;
  border-bottom: 2px solid #d65471;
  outline: none;
  margin: 20px;
  font-size: 18px;
}
.create_space_expand_container input:hover {
  border-bottom: 3px solid #d65471;
}
.create_space_expand_container input::placeholder {
  font-size: 18px;
  color: #555;
  text-align: center;
}
.create_space_expand_container_footer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    width: 400px;
    background-color: #d65471;
    height: 40px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
}
.create_space_expand_container button {
  background-color: #d65471;
  color: white;
  border: none;
  font-size: 20px;
  cursor: pointer;
  width: 100%;
  outline: none;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}
  
  .score_calculation,
  .score_expand {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
  }
  .score_expand_container,
  .score_calculation_container {
    background-image: url("./assets/score_background.jpg");
    position: absolute;
    width: 400px;
    height: 600px;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
  }
  .score_expand_header {
    background-color: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #555;
    width: 250px;
  }
  .score_expand_main {
    display: flex;
    flex-direction: column;
  }
  .score_expand input {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 300px;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid black;
    outline: none;
  }
  .score_expand h4 {
    color: white;
  }
  #score_expand_close {
    cursor: pointer;
    font-size: 20px;
    top: 10px;
    right: 10px;
    position: absolute;
    color: white;
  }
  #score_calculation_close {
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    color: white;
    top: 10px;
    right: 10px;
  }
  .score_expand_footer {
    margin-top: 10px;
  }
  .score_expand button {
    width: 200px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border: none;
    border-radius: 10px;
    outline: none;
    padding: 2px;
    color: #555;
    cursor: pointer;
  }
  
  .percent {
    position: relative;
    width: 250px;
    height: 250px;
  }
  .percent svg {
    width: 250px;
    height: 250px;
  }
  .percent svg circle {
    width: 250px;
    height: 250px;
    fill: none;
    stroke-width: 10;
    stroke: red;
    transform: translate(50px, 50px);
    stroke-dasharray: 570;
    stroke-dashoffset: 570;
    stroke-linecap: round;
  }
  .percent svg circle:nth-child(1) {
    stroke-dashoffset: 0;
    stroke: #f3f3f3;
  }
  .percent svg circle:nth-child(2) {
    stroke: red;
  }
  .percent .number {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #111;
  }
  .whiteboard_preview_expand {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.9);
    overflow-x: auto;
    opacity: 0;
    justify-content: center;
    align-items: center;
  }
  .whiteboard_preview_expand .wrapper {
    display: inline-block;
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
  }
  .whiteboard_preview_expand_container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .whiteboard_preview_expand_container iframe {
    position: relative;
    background-color: white;
    border: none;
    width: 540px;
    height: 870px;
  }
  .whiteboard_preview_expand p {
    right: 20px;
    top: 20px;
    position: absolute;
    color: white;
    font-size: 20px;
    cursor: pointer;
  }
  
  .whiteboard_preview_expand button {
    position: absolute;
    width: 300px;
    background-color: #d65471;
    color: white;
    border: none;
    height: 40px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .select_template {
    position: absolute;
    bottom: 0;
    height: 150px;
    opacity: 0;
    background-color: white;
  }
  .templates_whiteboard {
    background-image: url("https://wallpapercave.com/wp/wp3980172.jpg");
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    margin: 20px;
    overflow: auto;
    cursor: pointer;
  }
  .templates_whiteboard h5 {
    color: #d65471;
    font-size: 15px;
  }
  .select_template p {
    font-size: 20px;
    cursor: pointer;
  }
  .templates img {
    height: 50px;
    width: 50px;
  }
  .whiteboard_template_expand {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    /* background-color: rgba(0, 0, 0, 0.9); */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
  }
  .whiteboard_template_expand_container {
    width: 400px;
    height: 600px;
    background-color: white;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 25px;
  }
  .whiteboard_template_expand_header {
    padding-right: 20px;
    padding-left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d65471;
    color: white;
    height: 40px;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
  }
  .whiteboard_template_expand_header h3 {
    padding: 0;
    margin: 0;
  }
  #whiteboard_template_expand_close {
    cursor: pointer;
    font-size: 20px;
    color: white;
    padding: 0;
    margin: 0;
  }
  .whiteboard_template_expand_main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .whiteboard_template_expand_footer {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .whiteboard_template_expand_footer button {
    background-color: black;
    color: white;
    margin: 10px;
    width: 150px;
    border: none;
    outline: none;
    font-size: 20px;
    border-radius: 5px;
    padding: 5px;
  }
  .whiteboard_template_expand_main img {
    width: 300px;
    height: 300px;
  }
  .event_expand {
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
  }
  .event_expand_container {
    width: 400px;
    height: 600px;
    background-color: white;
    border-radius: 10px;
    position: absolute;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
  }
  .event_container_header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
  }
  .event_container_header h1 {
    color: #d65471;
  }
  .event_container_header h3 {
    color: #555;
  }
  .event_container_middle {
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    display: flex;
    flex-direction: column;
  }
  .bubbles p {
    font-size: 14px;
  }
  .event_container_middle input {
    border: none;
    outline: none;
    border-bottom: 2px solid #d65471;
    margin: 10px;
    font-size: 18px;
  }
  .event_container_middle span {
    margin: 10px;
    outline: none;
    border-bottom: 2px solid #d65471;
    max-width: 380px;
  }
  .event_container_middle span:empty::before {
    content: "Add Description(Optional)";
    color: #555;
  }
  .event_container_bubbles {
    max-width: 400px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .event_container_middle input:hover {
    border-bottom: 3px solid #d65471;
  }
  
  .event_container_bubbles {
    display: flex;
  }
  
  .bubbles {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    background-color: lightgray;
    color: white;
    border: 1px solid white;
    cursor: pointer;
    border-radius: 5px;
    padding: 5px;
    color: #d65471;
    min-width: 100px;
  }
  .event_container_footer {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .event_container_footer button {
    font-size: 20px;
    width: 200px;
    background-color: skyblue;
    border-radius: 10px;
    border: none;
    color: white;
    padding: 5px;
    cursor: pointer;
  }
  #event_expand_close {
    font-size: 20px;
    top: 10px;
    right: 10px;
    position: absolute;
    cursor: pointer;
    color: white;
  }
  
  #loader{
    display: none;
  }
  
  .topics_expand {
      width: 100%;
      height: 100%;
      opacity: 0;
      background-color: rgba(0, 0,0, 0.9);
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
  }
  .topics_expand_container {
      width: 400px;
      height: 600px;
      background-color: white;
      position: absolute;
      display: flex;
      flex-direction: column;
  }
  .topics_expand_header {
    padding-right: 15px;
    padding-left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d65471;
    color: white;
    height: 40px;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
  }
  .topics_list {
      overflow-x: auto;
      display: flex;
      max-width: 400px;
  }
  .topics_list div {
      display: flex;
      min-width: 130px;
      min-height: 40px;
      justify-content: center;
      align-items: center;
  }
  .topics_description_main {
      max-height: 500px;
      overflow-y: auto;
      cursor: pointer;
  }
  .topics_description_main_draw {
      opacity: 0;
      display: flex;
      max-height: 500px;
      overflow-y: auto;
      cursor: pointer;
  }
  .topics_list p {
      cursor: pointer;
      margin-right: 10px;
      font-size: 16px;
  }
  
  .game,.game_cutesy {
      display: flex;
      justify-content: center;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      border-radius: 10px;
      margin: 15px;
  }
  .game_img {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .game_name {
    margin-left: 10px;
    margin-right: 10px;
  }
  .game_img img {
      height: 50px;
      width: 50px;
  }
  .plus_img {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .plus_img img {
      height: 40px;
      width: 40px;
  }
  .game_name {
      padding: 10px;
  }
  .game_name p {
      font-size: 12px;
  }
  #friendly_fun {
      color: #d65471;
      border-bottom: 2px solid #d65471;
  }
  #topics_expand_close {
      font-size: 20px;
      top: 10px;
      right: 10px;
      position: absolute;
      cursor: pointer;
      color: white;
  }
.fancyText_expand,.selectTemplate_expand {
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: rgba(0, 0,0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}
.fancyText_expand_container,.select_template_container {
    width: 400px;
    height: 600px;
    background-color: white;
    position: absolute;
    display: flex;
    flex-direction: column;
    border-radius: 25px;
    max-height: 600px;
}
.topics_expand_header h4 {
  margin: 0;
  padding: 0;
  font-size: 20px;
}
.topics_list p{
  margin: 0;
  padding: 0;
}
.fancyText_footer {
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 5px;
    width: 400px;
}
.fancyText_footer span {
   margin-bottom: 0.2em;
   margin-left: 1em;
    flex: 1;
    background-color: white;
    outline: none;
    max-width: 300px;
    border-bottom: 2px solid #d65471;
    max-height: 50px;
    overflow: auto;
}

.fancyText_footer span::-webkit-scrollbar {
  width: 5px;
}
.fancyText_footer span::-webkit-scrollbar-thumb {
  background-color: grey;
  height: 2px;
}
.fancyText_footer span:hover {
    border-bottom: 3px solid #d65471;
}
.fancyText_footer span:empty::before {
    content: "Type...";
    color: #555;
    font-size: 18px;
}
.fancy_texts {
    display: flex;
    justify-content: center;
    box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 2px 6px 2px rgb(60 64 67 / 15%);
    border-radius: 0.5rem;
    margin: 20px;
    padding: 10px;
    word-break: break-word;
}
.fancy_texts p {
    padding-left: 10px;
    font-size: 14px;
}
.fancyText_footer img {
    width: 30px;
    height: 30px;
    cursor: pointer;
}
#fancy_text {
  margin-left: 10px;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.3em;
  text-align: center;
  color: white;
  background: #d65471;
  line-height: 1.65em;
}
#font {
    color: #d65471;
    border-bottom: 2px solid #d65471;
}
#fancyText_expand_close {
    font-size: 20px;
    cursor: pointer;
    color: white;
    padding: 0;
    margin: 0;
}
.invite_friend_expand {
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: rgba(0, 0,0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}
.invite_friend_expand_container {
    width: 400px;
    height: 200px;
    background-color: white;
    position: absolute;
    display: flex;
    flex-direction: column;
    border-radius: 25px;
}
.invite_friend_header {
    height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d65471;
    color: white;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
.invite_friend_header h4 {
  margin: 0;
  flex: 1;
  padding: 0;
  font-size: 20px;
}
.invite_friend_main {
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    justify-content: space-around;
}
.invite_friend_main input {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 10px;
    border-radius: 5px;
    border: none;
    flex: 0.7;
    outline: none;
}
.invite_friend_main img {
    margin-top: 10px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
#inviteClose {
  font-size: 20px;
  background-color: transparent;
  cursor: pointer;
  color: white;
  padding: 0;
  margin: 0;
}
.templates_list {
  display: inline-block;
}
.templates {
  width: 145px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border: none;
  margin-left: 6%;
  margin-right: 6%;
  margin-top: 5px;
}
.templates img{
  overflow-y: hidden;
  overflow-x: hidden;
  border: none;
  height: 150px;
  width: 150px;
  padding: 5px;
  position: absolute;
}
.templates p {
  text-align: center;
  margin: 0;
  padding: 0;
  color: black;
  width: 145px;
  max-height: 150px;
  overflow: auto;
  word-wrap: break-word;
  z-index: 10;
}
.templates p::-webkit-scrollbar {
  width: 0px;
}
.template_card {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.template_card img{
  position: relative;
  height: 250px;
  width: 250px;
  border-radius: 5px;
}
.template_card p {
  text-align: center;
  position: absolute;
  font-size: 16px;
  overflow: auto;
  max-height: unset;
  color: rgb(0, 0, 0);
  padding: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
}
.template_card p::-webkit-scrollbar {
  width: 0px;
}
#selectTemplate_expand_close {
  font-size: 20px;
  color: white;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
 
  .signup {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: #00000061;
    justify-content: center;
    align-items: center;
  }
  @media screen and (max-width: 900px) {
    #signup_btn {
      display: none;
    }
  }
  
  #showInviteLink {
    display: none;
    position: absolute;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background: #00000061;
  }
  
  #inviteLinkSpan {
    padding: 12px;
    background-color: white;
    color: black;
    cursor: pointer;
    border: none;
  }


  #chat_header_left_name{
    font-size: 1.6em;
  }

  #videoCallContainer{
    position: absolute;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.295);
    z-index: 10;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  #videoCallDialog{
    background-color: white;
    text-align: center;
    padding: 0.5em;
  }

  #videoCallCenter{
    display: flex;
  }

  #videoCallCenter>video{
    color: white;
    margin: 0.5em;
    background-color: rgba(0, 0, 0, 0.678);
    height: 40vh;
    width: 40vh;
  }

  #videoCallClose{
    background-color: white;
    border: 1px solid black;
    padding: 0.2em 0.5em;
  }

  #selectedFontScreen{
    color:#d65471;
    border-bottom:2px solid #d65471;
  }


  .shadow-effect {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    text-align: center;
  border:1px solid #ECECEC;
    box-shadow: 0 19px 38px rgba(0,0,0,0.10), 0 15px 12px rgba(0,0,0,0.02);
  }
  #customers-testimonials .shadow-effect p {
    font-family: inherit;
    font-size: 17px;
    line-height: 1.5;
    margin: 0 0 17px 0;
    font-weight: 300;
  }
  .testimonial-name {
    margin: -17px auto 0;
    display: table;
    width: auto;
    background: #3190E7;
    padding: 9px 35px;
    border-radius: 12px;
    text-align: center;
    color: #fff;
    box-shadow: 0 9px 18px rgba(0,0,0,0.12), 0 5px 7px rgba(0,0,0,0.05);
  }
  #customers-testimonials .item {
    text-align: center;
    padding: 50px;
      margin-bottom:40px;
    opacity: .2;
    -webkit-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  #customers-testimonials .owl-item.active.center .item {
    opacity: 1;
    -webkit-transform: scale3d(1.0, 1.0, 1);
    transform: scale3d(1.0, 1.0, 1);
  }
  .owl-carousel .owl-item img {
    transform-style: preserve-3d;
    max-width: 90px;
    margin: 0 auto 17px;
  }
  #customers-testimonials.owl-carousel .owl-dots .owl-dot.active span,
  #customers-testimonials.owl-carousel .owl-dots .owl-dot:hover span {
    background: #3190E7;
    transform: translate3d(0px, -50%, 0px) scale(0.7);
  }
  #customers-testimonials.owl-carousel .owl-dots{
  display: inline-block;
  width: 100%;
  text-align: center;
  }
  #customers-testimonials.owl-carousel .owl-dots .owl-dot{
  display: inline-block;
  }
  #customers-testimonials.owl-carousel .owl-dots .owl-dot span {
    background: #3190E7;
    display: inline-block;
    height: 20px;
    margin: 0 2px 5px;
    transform: translate3d(0px, -50%, 0px) scale(0.3);
    transform-origin: 50% 50% 0;
    transition: all 250ms ease-out 0s;
    width: 20px;
  }
  .notes_expand_container {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.9);
    /* display: flex; */
    justify-content: center;
    align-items: center;
    opacity: 0;
    z-index: 2;
  }


#image_preview_container,#video_preview_container {
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 100;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.9);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#image_preview {
  width: 300px;
  height: 300px;
  border-radius: 10px;
}
#video_preview {
  width: 400px;
  height: 400px;
  border-radius: 10px;
}
#image_preview_container div,#video_preview_container div {
  width: 90vw;
  margin: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#image_caption,#video_caption {
  padding: 5px 10px;
  flex: 1;
  border: none;
  width: 100%;
  border-radius: 10px;
  outline: none;
}
#send_image_preview,#send_video_preview {
  width: 40px;
  height: 40px;
  margin: 0 1rem;
  cursor: pointer;
}
.image_preview_close,.video_preview_close {
  font-size: 20px;
  top: 10px;
  right: 10px;
  position: absolute;
  cursor: pointer;
  color: white;
}
.status1_container,.status0_container {
  position: absolute;
  top: 50%;
  right: 30%;
  padding: 1rem 2rem;
  width: 250px;
  height: 100px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  background: white;
  outline: none;
}
.status0_container {
  height: 150px;
  width: 350px;
}
.friendRequest_buttons_container {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#requestAccept_btn {
  width: 60px;
  padding: 5px 10px;
  border-radius: 10px;
  background: #d65471;
  color: white;
  border: none;
}
#reject_request_btn {
  width: 60px;
  padding: 5px 10px;
  border-radius: 10px;
  color: #d65471;
  background: white;
  border: 1px solid #d65471;
  margin-right: 10px;
}

.main-image img {
  max-width: 90%;
  height: auto;
  max-height: 700px;
  border-radius: 10px;
  
}
.section-7img {
  width: 70%;
  border-radius: 20px;
}