#chat.single{
  min-height:40rem;
}
#chat .list{
  margin:4rem 0;
}
#chat.single .list{
  display:none;
}
#chat .list .item{
  min-height:8rem;
  padding-bottom:1rem;
  text-align:right;
  opacity:0;
  transition:opacity .2s;
}
#chat .list .item.show{
  opacity:1;
}
#chat .list .item > span{
  font-size:2rem;
  line-height:120%;
  color:#323232;
  display:inline-block;
  text-align:left;
  padding:1rem 2rem 1rem 4rem;
  border-bottom-left-radius:4rem;
  background:#f0f0f0;
  _margin-right:2rem;
  margin-left:8rem;
  position:relative;
}
#chat .list .item > em{
  display:block;
  font-size:1.3rem;
  color:#12112d;
  font-style:normal;
  text-align:right;
  margin-right:1.5rem;
}
#chat .list .robot{
  padding-left:11rem;
  position:relative;
  text-align:left;
}
#chat .list .robot::before{
  content:'';
  width:8rem;
  height:8.1rem;
  position:absolute;
  top:0;
  left:0;
  background:url(images/asistents.png) no-repeat center top;
  background-size:contain;
} 
#chat .list .robot > span{
  color:#ffffff;
  padding:1rem 4rem 1rem 2rem;
  border-bottom-right-radius:4rem;
  border-bottom-left-radius:0;
  background:#2baba9;
  margin-left:0;
  min-width:10rem;
}
@-webkit-keyframes ellipsis {
  to {
    width:3rem;    
  }
}
@keyframes ellipsis {
  to {
    width:3rem;    
  }
}
#chat .list .robot > span > i::after{
  content: "\2026";
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 900ms infinite;
  animation: ellipsis steps(4,end) 900ms infinite;
  width:0rem;
}
#chat .list .robot > span::before{
  content:'';
	border-left:1.6rem solid transparent;
	border-right:1.6rem solid transparent;
	border-bottom:1.6rem solid #2baba9;
  transform:rotate(45deg);
  width:0;
  height:0;
  position:absolute;
  top:1rem;
  left:-1.6rem;
} 
#chat .list .robot.ques > span{
  background:#21566d;
}
#chat .list .robot.ques > span::before{
	border-bottom:1.6rem solid #21566d;
}
#chat .list .robot > em{
  text-align:left;
  margin:0 0 0 1.5rem;
}
#chat .form-group{
  margin:0 15px 0 0;
}
#chat .form label.q{
  display:none;
}
#chat.single .form label.q{
  font-size:2rem;
  line-height:120%;
  color:#162642;
  font-weight:bold;
  display:block;
}
#chat .form .answers{
  margin:0 0 1rem 11rem;
}
#chat.single .form .answers{
  margin:3rem 0 0 0;
}
#chat .form .answers li{
  display:inline-block;
  vertical-align:top;
}
#chat .form .answers input{
  display:none;
}
#chat .form .answers label{
  font-size:1.8rem;
  line-height:3.6rem;
  color:#323232;
  padding-left:5rem;
  margin:0 2rem 0 2rem;
  position:relative;
  vertical-align:middle;
  display:inline-block;
  cursor:pointer;
}
#chat .form .answers label span{
  padding:0;
}
#chat .form .answers label::before{
  content:'';
  width:3.6rem;
  height:3.6rem;
  border-radius:50%;
  border:1px solid #c9c9c9;
  display:block;
  left:0;
  position:absolute;
  background:url(images/spacer.gif) no-repeat center;
  background-size:contain;
}
#chat .form .answers input:checked + label::before{
  background-image:url(images/check.png);
  background-image:url(images/check.svg), none;
}


#chat .form .submit{
  position:relative;
}
#chat .form .submit .form-control{
  padding-right:40px;
}
#chat .form .submit button{
  width:28px;
  height:28px;
  background:none;
  border:0;
  position:absolute;
  right:10px;
  top:4px;
  padding:0;
}
#chat .form .submit button svg{
  fill:darkgray;
}
#chat .form .submit button:hover svg{
  fill:#1f8d85;
}


#chat .done{
  color:#323232;
}
#chat .done h3{
  font-size:2.4rem;
  line-height:120%;
  color:#162642;
  text-transform:uppercase;
  margin:0 0 3.5rem 0;
}
#chat .done h4{
  font-size:2rem;
  line-height:120%;
  color:#ffffff;
  font-weight:normal;
  margin:0 0 4rem 0;
  position:relative;
}
#chat .done h4::before{
  content:'';
  width:8rem;
  height:8.1rem;
  position:absolute;
  top:0;
  left:0;
  background:url(images/asistents.png) no-repeat center top;
  background-size:contain;
} 
#chat.single .done h4::before{
  display:none;
}
#chat .done h4 span{
  display:block;
  position:relative;
  padding:1.5rem 4rem 1.5rem 2rem;
  border-bottom-right-radius:4rem;
  background:#2baba9;
  margin-left:11rem;
}
#chat.single .done h4 span{
  margin-left:0;
}
#chat .done h4 span::before{
  content:'';
	border-left:1.6rem solid transparent;
	border-right:1.6rem solid transparent;
	border-bottom:1.6rem solid #2baba9;
  transform:rotate(45deg);
  width:0;
  height:0;
  position:absolute;
  top:1rem;
  left:-1.6rem;
} 
#chat .done .orange h4 span{
  background:#f37e1f;
}
#chat .done .orange h4 span::before{
	border-bottom:1.6rem solid #f37e1f;
}
#chat .done .red h4 span{
  background:#f31348;
}
#chat .done .red h4 span::before{
	border-bottom:1.6rem solid #f31348;
}
#chat .done p{
  font-family: 'Rubik', sans-serif;
  font-size:1.6rem;
  line-height:120%;
  margin:0 0 3.5rem 0;
}
#chat .done h5{
  font-size:1.8rem;
  line-height:120%;
  color:#162642;
  font-weight:bold;
  margin:0 0 3.5rem 0;
}
#chat .done ul{
  font-family: 'Rubik', sans-serif;
  font-size:1.6rem;
  line-height:135%;
  list-style:none;
  margin:0 0 3.5rem 0;
  padding:0;
  columns:2;
  column-gap:4rem;
}
#chat .done li{
  padding:0 0 2rem 6rem;
  position:relative;
  page-break-inside: avoid;           /* Theoretically FF 20+ */
  break-inside: avoid-column;         /* Chrome, Safari, IE 11 */
  display:inline-block;
}
#chat .done li::before{
  content:'';
  width:5rem;
  height:5rem;
  position:absolute;
  left:0;
  background:url(images/spacer.gif) no-repeat center;
  background-size:contain;
}
#chat .done li.call::before{
  background-image:url(images/icons/call.png);
  background-image:url(images/icons/call.svg), none;
}
#chat .done li.save::before{
  background-image:url(images/icons/save.png);
  background-image:url(images/icons/save.svg), none;
}
#chat .done li.mail::before{
  background-image:url(images/icons/mail.png);
  background-image:url(images/icons/mail.svg), none;
}
#chat .done li.stop::before{
  background-image:url(images/icons/stop.png);
  background-image:url(images/icons/stop.svg), none;
}
#chat .done li.soc::before{
  background-image:url(images/icons/soc.png);
  background-image:url(images/icons/soc.svg), none;
}
#chat .done li.tell::before{
  background-image:url(images/icons/tell.png);
  background-image:url(images/icons/tell.svg), none;
}
#chat .done li.police::before{
  background-image:url(images/icons/police.png);
  background-image:url(images/icons/police.svg), none;
}
#chat .done li.positive::before{
  background-image:url(images/icons/positive.png);
  background-image:url(images/icons/positive.svg), none;
}
#chat .done li.explain::before{
  background-image:url(images/icons/explain.png);
  background-image:url(images/icons/explain.svg), none;
}
#chat .done li.confused::before{
  background-image:url(images/icons/confused.png);
  background-image:url(images/icons/confused.svg), none;
}
#chat .done a{
  color:#2baba9;
  text-decoration:underline;
}
#chat .done a:hover{
  text-decoration:none;
}