.fabs {
   bottom: 0;
   position: fixed;
   margin: 1em;
   right: 0;
   z-index: 998;
}

.fab {
   display: block;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   text-align: center;
   color: #f0f0f0;
   margin: 25px auto 0;
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
   cursor: pointer;
   -webkit-transition: all 0.1s ease-out;
   transition: all 0.1s ease-out;
   position: relative;
   z-index: 998;
   overflow: hidden;
   background: #01850c;
}

.fab > i {
   font-size: 2em;
   line-height: 55px;
   -webkit-transition: all 0.2s ease-out;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
   display: inline-block;
}

.fab:not(:last-child) {
   width: 0;
   height: 0;
   margin: 20px auto 0;
   opacity: 0;
   visibility: hidden;
   line-height: 40px;
}

.fab:not(:last-child) > i {
   font-size: 1.4em;
   line-height: 40px;
}

.fab:not(:last-child).is-visible {
   width: 40px;
   height: 40px;
   margin: 15px auto 10;
   opacity: 1;
   visibility: visible;
}

.fab:nth-last-child(1) {
   -webkit-transition-delay: 25ms;
   transition-delay: 25ms;
}

.fab:not(:last-child):nth-last-child(2) {
   -webkit-transition-delay: 20ms;
   transition-delay: 20ms;
}

.fab:not(:last-child):nth-last-child(3) {
   -webkit-transition-delay: 40ms;
   transition-delay: 40ms;
}

.fab:not(:last-child):nth-last-child(4) {
   -webkit-transition-delay: 60ms;
   transition-delay: 60ms;
}

.fab:not(:last-child):nth-last-child(5) {
   -webkit-transition-delay: 80ms;
   transition-delay: 80ms;
}

.fab(:last-child):active,
.fab(:last-child):focus,
.fab(:last-child):hover {
   box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
}

.chat_online {
   position: fixed;
   right: 85px;
   bottom: 20px;
   width: 400px;
   font-size: 12px;
   line-height: 22px;
   font-weight: 500;
   -webkit-font-smoothing: antialiased;
   font-smoothing: antialiased;
   box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22);
   border-radius: 10px;
   visibility: hidden;
   opacity: 0;
   transition: visibility 0s, opacity 0.2s linear;
   -webkit-transition: visibility 0s, opacity 0.2s linear;
   -webkit-transition: visibility 0s, opacity 0.2s linear;
}

.texto-chat {
   padding: 12px 31px;
   font-size: 0.9rem;
   font-weight: 100;
   line-height: 1.4;
}

.chat_header {
   font-weight: 500;
   color: #fff;
   height: 40px;
   background: #12424d;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   padding-top: 10px;
   font-family: Gotham-Medium;
   font-size: 15px;
   text-transform: uppercase;
}

.chat_header .span {
   float: right;
}

.chat_online.is-visible {
   visibility: visible;
   opacity: 1;
}

.is-hide {
   opacity: 0;
   visibility: hidden;
   transition: visibility 0s, opacity 0.2s linear;
   -webkit-transition: visibility 0s, opacity 0.2s linear;
   -webkit-transition: visibility 0s, opacity 0.2s linear;
}

.chat_option {
   float: left;
   list-style: none;
   position: relative;
   height: 100%;
   width: 100%;
   text-align: relative;
   margin-right: 10px;
   letter-spacing: 0.5px;
   font-weight: 400;
}

.chat_option img {
   border-radius: 50%;
   width: 55px;
   float: left;
   margin: -35px 10px 10px 10px;
   border: 4px solid rgba(0, 0, 0, 0.21);
}

.chat_color {
   display: block;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   margin: 10px;
   float: left;
}

.chat_body {
   background: #fff;
   width: 100%;
   text-align: center;
   overflow-y: auto;
   padding-bottom: 10px;
   border-bottom-right-radius: 10px;
   border-bottom-left-radius: 10px;
}

#chat_body {
   height: 400px;
}

.chat_body a {
   width: 70%;
   text-align: center;
   font-size: 13px;
   margin: auto;
}

.is-active {
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
   -webkit-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
}

.is-float {
   box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
}

.is-loading {
   display: block;
   -webkit-animation: load 1s cubic-bezier(0, 0.99, 1, 0.6) infinite;
   animation: load 1s cubic-bezier(0, 0.99, 1, 0.6) infinite;
}

@media only screen and (min-width: 300px) {
   .chat_online {
      width: 250px;
   }
}

@media only screen and (min-width: 480px) {
   .chat_online {
      width: 300px;
   }

   .chat_field {
      width: 65%;
   }
}

@media only screen and (min-width: 768px) {
   .chat_online {
      width: 300px;
   }

   .chat_field {
      width: 65%;
   }
}

@media only screen and (min-width: 1024px) {
   .chat_online {
      width: 275px;
   }

   .chat_field {
      width: 65%;
   }
}

.blue .fab {
   background: #29292a;
   color: #fff;
}

.chat_online .btn {
   background: #12424d;
   padding: 10px 0;
   color: #fff;
   border: 1px solid #12424d;
   margin: 5px auto;
   font-size: 1em;
   text-align: center;
   text-transform: uppercase;
   box-sizing: border-box;
   font-family: Gotham-Medium;
   display: block;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
}

.chat_online .btn:hover {
   color: #12424d;
   background: #fff;
   border: 1px solid #12424d;
}