#peekobot-container {

    border: none;

    height: var(--peekobot-height);

    position: relative;

}

#peekobot-inner {

    height: 80%;

    overflow-y: scroll;

    overflow-x: hidden;

    scroll-behavior: smooth;

    position: relative;

    scrollbar-width: none;

    -ms-overflow-style: none;

}

#peekobot-inner::-webkit-scrollbar {
 
    display: none;
}


.chat-response,

.chat-ask {

    opacity: 0;
  /* Set to activated to show */

    transform: translateY(-50%);
 /* Set to activated to move down */

    transition: all 0.3s 0.3s;

    border-radius: 8px;

    background-color: #C8F0FD;

    padding: 0.5rem 0.7rem;

    line-height: 1.4;

    color: #0050D7;

    width: 80%;
 
    margin-bottom: 0.5rem;

}

.chat-response {

    margin-left: 26px;

    position: relative;

}

.chat-response:before {

    display: block;

    content: '';

    width: 30px;

    height: 30px;
 
    position: absolute;

    left: -27px;

    top: 6px;
	

    background-image: var(--peekobot-avatar);

    background-color: #FFF;

    background-repeat: no-repeat;

    background-size: 100%;

    border-radius: 100%;

}

.chat-ask {

  background-color: #0012b3;

  margin-right: 0;

  margin-left: auto;

  color: hsl(0, 0%, 100%);
}

.choices {

  opacity: 0; /* Set to active to show */

  transform: translateY(-50%); /* Set to activated to move down */

  transition: all 0.3s 0.3s;

  transition: opacity 0.3s 0.3s;

  margin-top: 0.5rem;

  margin-left: 28px;

}

.choice {

  display: inline-block;

  outline: none;

  border: 1px solid #85d9fd;

  padding: 0.3rem 0.8rem;

  background-color: hsl(0, 0%, 100%);

  border-radius: 0.5rem;

  font-size: 0.9rem;

  line-height: 1.3;

  margin-bottom: 0.5rem;

  margin-right: 0.5rem;

  text-decoration: none;
  
  color: #0000FF;

  cursor: pointer;


}
.choice:hover {
	background-color: #99FCA5;
	color: #0000FF;
}

.choice:disabled {

  color: hsl(0, 0%, 80%);

  border-color: hsl(0, 0%, 80%);

}

.activated {

  opacity: 1;

  transform: translateY(0);

}

.restart {

  position: absolute;

  bottom: 0.0rem;

  right: -0.5rem;

  outline: none;

  font-size: 12px;

  color: hsl(0, 0%, 50%);

  box-shadow: none;

  border: 1px solid hsl(0, 0%, 60%);

  border-radius: 1rem;

  background: hsl(0, 0%, 100%);

  padding: 0.2rem 0.5rem;

  cursor: pointer;
}
.restart:hover {
	background-color: #99FCA5;
	color: #0000FF;
}