/* body {
  margin:0;
  height: 100vh;
  background: rgb(235, 235, 235);
} */

.liveChat {
  background: white;
  position: absolute;
  right: 2em;
  bottom: 2em;
  width: 75%;
  border-radius: 1em;
  box-shadow: 14px 14px 38px rgba(0, 0, 0, 0.08);
  max-width: 300px;
  clip-path: circle(0% at 10% 100%);
}

.liveChat .header {
    background: #138496;
    padding: 1em;
    display: flex;
    justify-content: space-between;
    color: white;
    border-top-right-radius: 1em;
    border-top-left-radius: 1em;
    
}
.liveChat .header button {
  display: inline-block;
  vertical-align: top;
  line-height: 1;
  padding: 10px;
  margin: 5px;
  color: grey;
  background-color: white;
  font-weight: bold;
  border-radius: 20px;

  
}

.liveChat h4 {
    margin: 0;
    font-size: 1.2rem;
}
.liveChat .content{
    padding: 1em;

}
.liveChat .chat{
    height: 300px;
    overflow-y: scroll;
}

.liveChat .message p.name {
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 0;
}

.liveChat .message p.msg{
  margin-bottom: 1.5em;
}

.liveChat .message.operator .name {
  color: #138496;
}
.liveChat .message.user .name, .message.user .msg{
  text-align: right;
  margin-right: 1em;
}
.liveChat .send-container{
  display: grid;
  grid-template-columns: 70% auto;
  margin: 1em 0 .5em;
  border-radius: .7em;
  box-shadow: 4px 4px 17px rgba(0, 0, 0, 0.12);
  
}
.liveChat .send-container input[type='text']{
 padding: 1em;
 border-top-left-radius: .7em;   
 border-bottom-left-radius: .7em;
 border: 1px solid grey;
}
.liveChat .send-container input[type='button']{
  background: #138496;
  padding: 1em;
  border-top-right-radius: .7em;   
  border-bottom-right-radius: .7em;
  border: none;
  font-weight: bold;
  color: white;
  cursor: pointer;
 }


svg.bubble{
  position: absolute;
  width: 4em; 
  bottom: 2em;
  right: 2em;
  cursor: pointer;
}
svg.exit{
  width: 1.5em;
  cursor: pointer;
}

.animate-chat{
  animation: grow-circle .3s forwards ease-out;
}

@keyframes grow-circle {
  from {
    clip-path: circle(0% at 100% 100%);
  }
  to {
    clip-path: circle(100% at 50% 50%);
  }
}

.stars {
  font-size: 24px;
}

.star {
  cursor: pointer;
  color: #ddd;
  margin-right: 5px;
}

.selected {
  color: #ffc107;
}