.animated, .action-button, .action-button--icon, .action-button-small-container, .action-button-small {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }

.zoomIn, .action-button.action-button-show, .action-button-small-show .action-button-small {
  animation-name: zoomIn; }

@keyframes zoomOut {
  from {
    opacity: 1; }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); }
  to {
    opacity: 0; } }

.zoomOut, .action-button.action-button-hide, .action-button-small-hide .action-button-small {
  animation-name: zoomOut; }

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

.fadeIn, .action-button-small-show.action-button-small-container {
  animation-name: fadeIn; }

@keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

.fadeOut, .action-button-small-hide.action-button-small-container {
  animation-name: fadeOut; }

.action-button {
  height: 56px;
  width: 56px;
  border: none;
  border-radius: 100px;
  align-items: center;
  justify-content: center;
  background: blue;
  position: fixed;
  bottom: 20px;
  padding-top: 0px;
  padding-bottom: 1px;
  right: 20px;
  z-index: 9999;
  overflow: hidden;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  display: none; }

.action-button.action-button-show {
  display: flex;
  animation-duration: 0.25s; }

.action-button.action-button-hide {
  animation-duration: 0.25s; }

.action-button--icon {
  font-size: 24px;
  line-height: 24px;
  position: absolute; }

.action-button-icon__close {
  display: none; }

.action-button-show .action-button--icon.action-button--icon__main {
  animation-duration: 0.25s;
  animation-name: rotateInActionButton; }

@keyframes rotateInActionButton {
  from {
    opacity: 0;
    transform: rotate(-90deg); }
  to {
    opacity: 1;
    transform: rotate(0deg); } }

.action-button-menu-show .action-button--icon.action-button--icon__main {
  animation-duration: 0.15s;
  animation-name: rotateOutButton; }

.action-button-menu-hide .action-button--icon.action-button--icon__main {
  animation-duration: 0.15s;
  animation-name: rotateInButton; }

.action-button-menu-show .action-button-icon__close {
  display: block;
  animation-duration: 0.15s;
  animation-name: rotateInButton; }

.action-button-menu-hide .action-button-icon__close {
  display: block;
  animation-duration: 0.15s;
  animation-name: rotateOutButton; }

@keyframes rotateOutButton {
  from {
    opacity: 1;
    transform: rotate(0); }
  to {
    opacity: 0;
    transform: rotate(90deg); } }

@keyframes rotateInButton {
  from {
    opacity: 0;
    transform: rotate(90deg); }
  to {
    opacity: 1;
    transform: rotate(0); } }

.action-button-small-container {
  display: none;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  flex-direction: column-reverse;
  align-items: flex-end;
  justify-content: flex-start;
  position: fixed;
  z-index: 9999;
  padding-bottom: 90px;
  padding-right: 17px; }

.action-button-small-show.action-button-small-container {
  display: flex;
  animation-duration: 0.15s; }

.action-button-small-hide.action-button-small-container {
  display: flex;
  animation-duration: 0.15s; }

.action-button-small-container__hidden {
  display: none; }

.action-button-small {
  height: 40px;
  width: 40px;
  border: none;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
  margin: 10px;
  color: #767673;
  background-color: #fafafa; }

.action-button-small--label {
  background-color: white;
  border-radius: 4px;
  font-weight: bold;
  padding: 2px 10px;
  display: block;
  font-size: 14px;
  color: grey;
  box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 20px; }

.action-button-small--icon {
  font-size: 24px;
  line-height: 24px; }

.action-button-small--icon__label {
  font-weight: normal;
  opacity: 1;
  text-transform: capitalize;
  font-size: 24px;
  line-height: 24px; }

.action-button-small-show .action-button-small {
  animation-duration: 0.15s; }

.action-button-small-hide .action-button-small {
  animation-duration: 0.15s; }

.action-button-small-container--individual {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  display: flex;
  animation-duration: 5s;
  animation-fill-mode: forwards; }