/*
 Theme Name:   notaboes child theme
 Description:  A child theme of the Parent Theme
 Author:       Rankdata
 Template:     hello-elementor
 Version:      1.0.0
*/

.chat-container{
  max-width: 694px;
  height: 788px;
  border-radius: 16px;
  background-color: #F1F2F2;
}
.chat-messages{
  background-color: #F1F2F2;
}
.chat-header{
  background-color: #E0DAF3;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-header-profile{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}
.elementor-kit-7 .chat-header-name h2{
  font-weight: 400;
  font-size: 20px;
  color: #121212;
  margin: 0px;
}
.chat-date-separator{
  background-color: #F1F2F2;
  color: #989898;
  font-weight: 500;
  font-size: 12px;
}
.chat-header-name{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: Fraunces;
}
.chat-header-name p{
  font-weight: 400;
  font-size: 12px;
  color: #4E4E4E;
}
.elementor .chat-header-profilepicture{
  width: 48px;
  height: 48px;
  border-radius: 50%; /* or use 146.4px if you prefer */
  object-fit: cover;
  object-position: center;
}
.chat-timer{
  background-color: white;
  color: #F84359;
  font-size: 16px;
  font-weight: 400;
  display: flex;
  padding: 10px 16px 10px 16px;
  border-radius: 8px;
  align-items: center;
  font-family: Poppins;
  box-shadow: 2px 10px 32px 0px #00000008;
}
.timer-display-styling{
  font-weight: 600;
}
.timer-display-remaining{
  padding-left: 8px;
}
.chat-timer .fa-clock{
  padding-right: 8px;
}
.system-message{
  color: black;
}
.no-credits{
  color: #F84359;
  font-family: Poppins;
  background-color: #FFFFFF;
  border-radius: 20px;
  font-weight: 400;
  width: fit-content;
  padding: 4px 8px 4px 8px;
  box-shadow: 2px 10px 32px 0px #00000008;
}
.chat-messages{
  display: flex;
  flex-direction: column;
}
.chat-message.user{
  background-color: #955EF7;
  color: #FFFFFF;
  font-weight: 400;
  font-family: Poppins;
  font-size: 14px;
}
.chat-message.admin{
  background-color: #FFFFFF;
  font-size: 14px;
  font-weight: 400;
  font-family: poppins;
}
.chat-message{
  box-shadow: 2px 10px 32px 0px #00000008;

}
.chat-schedule-container{
  border-radius: 0px 8px 8px 8px !important;
  margin-top: 10px !important;
}
.make-appointment-button{
  border: 1px solid #F848B580 !important;
  color: #F848B5 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  background-color: #F1F2F2 !important;
  border-radius: 244px !important;
  font-family: poppins !important;
}
.chat-schedule-form input{
  background: #E0DAF380;
  border: none !important;
  font-size: 16px;
  font-weight: 400;
  color: #292929;
  font-family: poppins;
}
.chat-schedule-form label{
  color: #000000;
    font-family: poppins;
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 10px;
}
.schedule-now{
  background: linear-gradient(
    180deg,
    #ffa5e3 0%,
    #f848b5 100%
  ) !important;
  color: #F1F2F2 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  background-color: white !important;
  border-radius: 244px !important;
  font-family: poppins !important;
}
.chat-send-button{
  background: linear-gradient(
    180deg,
    #ffa5e3 0%,
    #f848b5 100%
  );

}

.register-header-text{
  font-weight: 600;
}
.chat-login-container{
  background-color: #955EF7 !important;
}
.chat-register-container{
  background-color: #955EF7 !important;
}
.chat-auth-form button{
  background-image: linear-gradient(180deg, #FFA5E3 0%, #F848B5 100%) !important;
    border-radius: 244px 244px 244px 244px !important;
}
.chat-auth-form button{
  background-image: linear-gradient(180deg, #FFA5E3 0%, #F848B5 100%) !important;
    border-radius: 244px 244px 244px 244px !important;
}

.chat-auth-title{
  margin-bottom: 0px !important;
  font-family: "Poppins", Sans-serif !important;
}
.chat-auth-form{
  margin-top: 20px;
}
.login-form-class{
  margin-top: 40px;
}
@media (max-width: 767px) {
  .chat-header{
    flex-direction: column;
    align-items: flex-start;
  }
  .chat-timer{
    width: 208px;
  }
  .elementor-kit-7 .chat-send-button{
    padding: 10px 12px 10px 12px;
  }
}