/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  border-radius: 30px;
  cursor: pointer;
  position: fixed;
  bottom: 80px;
  right: 18px;
  width: 50px;
  z-index:9;
}

/* The popup chat - hidden by default */
.chat-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 10px;
  padding-right:60px;
  padding-bottom:20px;
  z-index: 9;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

/* Add styles to the form container */
.form-container {
  width: 300px;
  height:450px;
  padding: 10px;
  background-color: white;
  border:2px solid #FF0000;
}

/* Full-width textarea */
.form-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  resize: none;
  min-height: 100px;
}

/* When the textarea gets focus, do something */


/* Set a style for the submit/send button */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  cursor: pointer;
  width: 100%;
  margin-bottom:7px;
  opacity: 0.8;
}



/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}


/* Add a red background color to the cancel button */

 .cancel {
  color: #aaaaaa;
  float: right;
  font-size: 30px;
  font-weight: bold;
  padding-right:5px;
}

 .cancel:hover,
 .cancel:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}