/**
 * * Contacter
 * * Voice feedback form for your website for saving and transcribing user voice messages to text.
 * * Exclusively on https://1.envato.market/contacter
 * *
 * * @encoding        UTF-8
 * * @version         1.7.8
 * * @copyright       (C) 2018 - 2023 Merkulove ( https://merkulov.design/ ). All rights reserved.
 * * @license         Envato License https://1.envato.market/KYbje
 * * @contributors    Dmitry Merkulov (dmitry@merkulov.design)
 * * @support         help@merkulov.design
 * **/
@keyframes contacter-bounce {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes contacter-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes contacter-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes contacter-scale {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes contacter-slide-tr {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes contacter-slide-tl {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes contacter-slide-tt {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes contacter-slide-tt {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes contacter-slide-tb {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes contacter-flip-x {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes contacter-flip-y {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes contacter-rotate {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    transform-origin: center;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes contacter-wobble {
  from {
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes mdp-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes mdp-contacter-countdown {
  from {
    opacity: 1;
    transform: scale(3);
  }
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}
.mdp-contacter-form-box {
  position: relative;
}
.mdp-contacter-form-box.mdp-align-left .mdp-contacter-start-box,
.mdp-contacter-form-box.mdp-align-left .mdp-contacter-allow-access-box,
.mdp-contacter-form-box.mdp-align-left .mdp-contacter-mic-access-err-box,
.mdp-contacter-form-box.mdp-align-left .mdp-contacter-recording-box,
.mdp-contacter-form-box.mdp-align-left .mdp-contacter-reset-box,
.mdp-contacter-form-box.mdp-align-left .mdp-contacter-error-box,
.mdp-contacter-form-box.mdp-align-left .mdp-contacter-send-box,
.mdp-contacter-form-box.mdp-align-left .mdp-contacter-thanks-box {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.mdp-contacter-form-box.mdp-align-center .mdp-contacter-start-box,
.mdp-contacter-form-box.mdp-align-center .mdp-contacter-allow-access-box,
.mdp-contacter-form-box.mdp-align-center .mdp-contacter-mic-access-err-box,
.mdp-contacter-form-box.mdp-align-center .mdp-contacter-recording-box,
.mdp-contacter-form-box.mdp-align-center .mdp-contacter-reset-box,
.mdp-contacter-form-box.mdp-align-center .mdp-contacter-error-box,
.mdp-contacter-form-box.mdp-align-center .mdp-contacter-send-box,
.mdp-contacter-form-box.mdp-align-center .mdp-contacter-thanks-box {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mdp-contacter-form-box.mdp-align-right .mdp-contacter-start-box,
.mdp-contacter-form-box.mdp-align-right .mdp-contacter-allow-access-box,
.mdp-contacter-form-box.mdp-align-right .mdp-contacter-mic-access-err-box,
.mdp-contacter-form-box.mdp-align-right .mdp-contacter-recording-box,
.mdp-contacter-form-box.mdp-align-right .mdp-contacter-reset-box,
.mdp-contacter-form-box.mdp-align-right .mdp-contacter-error-box,
.mdp-contacter-form-box.mdp-align-right .mdp-contacter-send-box,
.mdp-contacter-form-box.mdp-align-right .mdp-contacter-thanks-box {
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.mdp-contacter-form-box.mdp-busy > div {
  opacity: 0.5;
}
.mdp-contacter-form-box.mdp-busy:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.01;
  background: #fff;
  z-index: 1;
}
.mdp-contacter-form-box.mdp-busy:after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  margin-top: -15px;
  top: 50%;
  left: 50%;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cpath d='M493.815,70.629c-11.001-1.003-20.73,7.102-21.733,18.102l-2.65,29.069C424.473,47.194,346.429,0,256,0 C158.719,0,72.988,55.522,30.43,138.854c-5.024,9.837-1.122,21.884,8.715,26.908c9.839,5.024,21.884,1.123,26.908-8.715 C102.07,86.523,174.397,40,256,40c74.377,0,141.499,38.731,179.953,99.408l-28.517-20.367c-8.989-6.419-21.48-4.337-27.899,4.651 c-6.419,8.989-4.337,21.479,4.651,27.899l86.475,61.761c12.674,9.035,30.155,0.764,31.541-14.459l9.711-106.53 C512.919,81.362,504.815,71.632,493.815,70.629z'/%3E%3Cpath d='M472.855,346.238c-9.838-5.023-21.884-1.122-26.908,8.715C409.93,425.477,337.603,472,256,472 c-74.377,0-141.499-38.731-179.953-99.408l28.517,20.367c8.989,6.419,21.479,4.337,27.899-4.651 c6.419-8.989,4.337-21.479-4.651-27.899l-86.475-61.761c-12.519-8.944-30.141-0.921-31.541,14.459l-9.711,106.53 c-1.003,11,7.102,20.73,18.101,21.733c11.014,1.001,20.731-7.112,21.733-18.102l2.65-29.069C87.527,464.806,165.571,512,256,512 c97.281,0,183.012-55.522,225.57-138.854C486.594,363.309,482.692,351.262,472.855,346.238z'/%3E%3C/svg%3E%0A");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  animation-name: mdp-spin;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.mdp-contacter-form-box .mdp-contacter-countdown-box,
.mdp-contacter-form-box .mdp-contacter-start-box,
.mdp-contacter-form-box .mdp-contacter-recording-box,
.mdp-contacter-form-box .mdp-contacter-reset-box,
.mdp-contacter-form-box .mdp-contacter-error-box,
.mdp-contacter-form-box .mdp-contacter-send-box,
.mdp-contacter-form-box .mdp-contacter-thanks-box,
.mdp-contacter-form-box .mdp-contacter-allow-access-box,
.mdp-contacter-form-box .mdp-contacter-mic-access-err-box {
  display: none;
}
.mdp-contacter-form-box.mdp-step-countdown .mdp-contacter-countdown-box, .mdp-contacter-form-box.mdp-step-start .mdp-contacter-start-box, .mdp-contacter-form-box.mdp-step-recording .mdp-contacter-recording-box, .mdp-contacter-form-box.mdp-step-reset .mdp-contacter-reset-box, .mdp-contacter-form-box.mdp-step-error .mdp-contacter-error-box, .mdp-contacter-form-box.mdp-step-send .mdp-contacter-send-box, .mdp-contacter-form-box.mdp-step-thanks .mdp-contacter-thanks-box, .mdp-contacter-form-box.mdp-step-allow-access .mdp-contacter-allow-access-box, .mdp-contacter-form-box.mdp-step-mic-access-err .mdp-contacter-mic-access-err-box {
  display: flex;
}
.mdp-contacter-form-box.mdp-align-none.mdp-step-countdown .mdp-contacter-countdown-box, .mdp-contacter-form-box.mdp-align-none.mdp-step-start .mdp-contacter-start-box, .mdp-contacter-form-box.mdp-align-none.mdp-step-recording .mdp-contacter-recording-box, .mdp-contacter-form-box.mdp-align-none.mdp-step-reset .mdp-contacter-reset-box, .mdp-contacter-form-box.mdp-align-none.mdp-step-error .mdp-contacter-error-box, .mdp-contacter-form-box.mdp-align-none.mdp-step-send .mdp-contacter-send-box, .mdp-contacter-form-box.mdp-align-none.mdp-step-thanks .mdp-contacter-thanks-box, .mdp-contacter-form-box.mdp-align-none.mdp-step-allow-access .mdp-contacter-allow-access-box, .mdp-contacter-form-box.mdp-align-none.mdp-step-mic-access-err .mdp-contacter-mic-access-err-box {
  display: block;
}
.mdp-contacter-form-box .mdp-speak-now-btns button {
  text-decoration: none;
}
.mdp-contacter-form-box .mdp-contacter-countdown-box {
  justify-content: center;
  align-items: center;
}
.mdp-contacter-form-box .mdp-contacter-countdown-box .mdp-contacter-countdown-box--counter {
  font-size: 4rem;
  font-weight: bold;
  padding: 2rem 0;
}
.mdp-contacter-form-box .mdp-contacter-countdown-box .mdp-contacter-countdown-box--counter.mdp-contacter-countdown-run {
  animation-name: "mdp-contacter-countdown";
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.mdp-contacter-form-box.mdp-step-allow-access .mdp-contacter-allow-access-box {
  animation-duration: 1s;
  animation-name: contacter-fade;
  animation-fill-mode: both;
}

@keyframes spin {
  from {
    transform: rotateZ(0);
  }
  to {
    transform: rotateZ(1turn);
  }
}
.mdp-contacter-player-box.green-audio-player {
  width: 100%;
  min-width: 300px;
  height: 56px;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 36px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: #fff;
  border-radius: 8px;
  box-sizing: border-box;
}
.mdp-contacter-player-box.green-audio-player svg,
.mdp-contacter-player-box.green-audio-player img {
  display: block;
}
.mdp-contacter-player-box.green-audio-player .play-pause-btn {
  display: none;
  cursor: pointer;
}
.mdp-contacter-player-box.green-audio-player .play-pause-btn svg {
  width: 12px;
}
.mdp-contacter-player-box.green-audio-player .loading .loading__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #b0b0b0;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.4s linear infinite;
}
.mdp-contacter-player-box.green-audio-player .slider {
  flex-grow: 1;
  background-color: #d8d8d8;
  cursor: pointer;
  position: relative;
}
.mdp-contacter-player-box.green-audio-player .slider .gap-progress {
  background-color: #0274e6;
  border-radius: inherit;
  position: absolute;
  pointer-events: none;
}
.mdp-contacter-player-box.green-audio-player .slider .gap-progress .pin {
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background-color: #0274e6;
  position: absolute;
  pointer-events: all;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.32);
}
.mdp-contacter-player-box.green-audio-player .slider .gap-progress .pin::after {
  content: "";
  display: block;
  background: rgba(0, 0, 0, 0);
  width: 200%;
  height: 200%;
  margin-left: -50%;
  margin-top: -50%;
  border-radius: 50%;
}
.mdp-contacter-player-box.green-audio-player .controls {
  font-family: "Roboto", inherit;
  font-size: 16px;
  line-height: 18px;
  color: #55606e;
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  margin-left: 24px;
  margin-right: 24px;
}
.mdp-contacter-player-box.green-audio-player .controls .controls__slider {
  margin-left: 16px;
  margin-right: 16px;
  border-radius: 2px;
  height: 4px;
}
.mdp-contacter-player-box.green-audio-player .controls .controls__slider .controls__progress {
  width: 0;
  height: 100%;
}
.mdp-contacter-player-box.green-audio-player .controls .controls__slider .controls__progress .progress__pin {
  right: -8px;
  top: -6px;
}
.mdp-contacter-player-box.green-audio-player .controls span {
  cursor: default;
}
.mdp-contacter-player-box.green-audio-player .volume {
  position: relative;
}
.mdp-contacter-player-box.green-audio-player .volume .volume__button {
  cursor: pointer;
}
.mdp-contacter-player-box.green-audio-player .volume .volume__button svg {
  width: 16px;
}
.mdp-contacter-player-box.green-audio-player .volume .volume__button.open path {
  fill: #0274e6;
}
.mdp-contacter-player-box.green-audio-player .volume .volume__controls {
  width: 30px;
  height: 135px;
  background-color: rgba(0, 0, 0, 0.62);
  border-radius: 7px;
  position: absolute;
  left: -3px;
  bottom: 52px;
  flex-direction: column;
  align-items: center;
  display: flex;
  z-index: 2;
}
.mdp-contacter-player-box.green-audio-player .volume .volume__controls.hidden {
  display: none;
}
.mdp-contacter-player-box.green-audio-player .volume .volume__controls.top {
  bottom: 52px;
  left: -3px;
}
.mdp-contacter-player-box.green-audio-player .volume .volume__controls.middle {
  bottom: -54px;
  left: 54px;
}
.mdp-contacter-player-box.green-audio-player .volume .volume__controls.bottom {
  bottom: -164px;
  left: -3px;
}
.mdp-contacter-player-box.green-audio-player .volume .volume__controls .volume__slider {
  margin-top: 12px;
  margin-bottom: 12px;
  width: 6px;
  border-radius: 3px;
}
.mdp-contacter-player-box.green-audio-player .volume .volume__controls .volume__slider .volume__progress {
  bottom: 0;
  height: 100%;
  width: 6px;
}
.mdp-contacter-player-box.green-audio-player .volume .volume__controls .volume__slider .volume__progress .volume__pin {
  left: -5px;
  top: -8px;
}
.mdp-contacter-player-box.green-audio-player .download {
  display: none;
  margin-left: 16px;
  cursor: pointer;
}

.mdp-contacter-fbutton-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}
.mdp-contacter-fbutton-overlay .mdp-contacter-modal-wrap {
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-delay: 0.4s;
  width: 100%;
  height: 100%;
}
.mdp-contacter-fbutton-overlay.mdp-contacter-modal-animation-bounce .mdp-contacter-modal-wrap {
  animation-name: contacter-bounce;
  animation-duration: 0.6s;
}
.mdp-contacter-fbutton-overlay.mdp-contacter-modal-animation-fade .mdp-contacter-modal-wrap {
  animation-name: contacter-fade;
  animation-duration: 0.6s;
}
.mdp-contacter-fbutton-overlay.mdp-contacter-modal-animation-flip-x .mdp-contacter-modal-wrap {
  animation-name: contacter-flip-x;
  animation-duration: 0.8s;
  backface-visibility: visible !important;
}
.mdp-contacter-fbutton-overlay.mdp-contacter-modal-animation-flip-y .mdp-contacter-modal-wrap {
  animation-name: contacter-flip-y;
  animation-duration: 0.8s;
  backface-visibility: visible !important;
}
.mdp-contacter-fbutton-overlay.mdp-contacter-modal-animation-scale .mdp-contacter-modal-wrap {
  animation-name: contacter-scale;
  animation-duration: 0.4s;
}
.mdp-contacter-fbutton-overlay.mdp-contacter-modal-animation-slide-tr .mdp-contacter-modal-wrap {
  animation-name: contacter-slide-tr;
  animation-duration: 0.4s;
}
.mdp-contacter-fbutton-overlay.mdp-contacter-modal-animation-slide-tl .mdp-contacter-modal-wrap {
  animation-name: contacter-slide-tl;
  animation-duration: 0.4s;
}
.mdp-contacter-fbutton-overlay.mdp-contacter-modal-animation-slide-tt .mdp-contacter-modal-wrap {
  animation-name: contacter-slide-tt;
  animation-duration: 0.4s;
}
.mdp-contacter-fbutton-overlay.mdp-contacter-modal-animation-slide-tb .mdp-contacter-modal-wrap {
  animation-name: contacter-slide-tb;
  animation-duration: 0.4s;
}
.mdp-contacter-fbutton-overlay.mdp-contacter-modal-animation-rotate .mdp-contacter-modal-wrap {
  animation-name: contacter-rotate;
  animation-duration: 0.8s;
}
.mdp-contacter-fbutton-overlay.mdp-contacter-modal-animation-wobble .mdp-contacter-modal-wrap {
  animation-name: contacter-wobble;
  animation-duration: 0.5s;
  backface-visibility: visible !important;
}
.mdp-contacter-fbutton-overlay .mdp-contacter-fbutton-modal {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  padding: 48px;
  width: 480px;
  max-width: 480px;
}
@media (max-width: 480px) {
  .mdp-contacter-fbutton-overlay .mdp-contacter-fbutton-modal {
    width: 100%;
  }
}
.mdp-contacter-fbutton-overlay .mdp-contacter-fbutton-modal h1,
.mdp-contacter-fbutton-overlay .mdp-contacter-fbutton-modal h2,
.mdp-contacter-fbutton-overlay .mdp-contacter-fbutton-modal h3,
.mdp-contacter-fbutton-overlay .mdp-contacter-fbutton-modal h4,
.mdp-contacter-fbutton-overlay .mdp-contacter-fbutton-modal h5,
.mdp-contacter-fbutton-overlay .mdp-contacter-fbutton-modal h6 {
  padding: 0 0 12px 0;
  margin: 0;
}
.mdp-contacter-fbutton-overlay .mdp-contacter-fbutton-modal div.mdp-contacter-start-box div:first-child {
  padding-top: 0;
}
.mdp-contacter-fbutton-overlay .mdp-contacter-fbutton-modal div.mdp-contacter-start-box div:last-child {
  padding-bottom: 0;
}
.mdp-contacter-fbutton-overlay .mdp-contacter-fbutton-modal button.mdp-contacter-close {
  cursor: pointer;
  position: absolute;
  right: 18px;
  top: 18px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
  z-index: 1;
  transition: 0.8s;
  transform-origin: center center;
  transform: scale(0.75);
  padding: 0;
  margin: 0;
  display: flex;
  background: transparent;
  border-radius: 3px;
  border: none;
}
.mdp-contacter-fbutton-overlay .mdp-contacter-fbutton-modal button.mdp-contacter-close:hover {
  opacity: 1;
  transform: scale(1);
  background: transparent;
  box-shadow: none;
}
.mdp-contacter-fbutton-overlay .mdp-contacter-fbutton-modal button.mdp-contacter-close:focus {
  opacity: 1;
  transform: scale(1);
  background: transparent;
  outline: none;
  box-shadow: 0 0 0 2px white, 0 0 0 4px #ccc;
}
.mdp-contacter-fbutton-overlay .mdp-contacter-fbutton-modal button.mdp-contacter-close:before, .mdp-contacter-fbutton-overlay .mdp-contacter-fbutton-modal button.mdp-contacter-close:after {
  position: absolute;
  left: 15px;
  top: 0;
  content: " ";
  height: 33px;
  width: 2px;
  background-color: #333;
}
.mdp-contacter-fbutton-overlay .mdp-contacter-fbutton-modal button.mdp-contacter-close:before {
  transform: rotate(45deg);
}
.mdp-contacter-fbutton-overlay .mdp-contacter-fbutton-modal button.mdp-contacter-close:after {
  transform: rotate(-45deg);
}

.mdp-contacter-reverse .mdp-contacter-fbutton-overlay {
  animation-delay: 0s;
  animation-duration: 0.6s;
  animation-name: contacter-fade-out;
}
.mdp-contacter-reverse .mdp-contacter-fbutton-overlay .mdp-contacter-modal-wrap {
  animation-name: contacter-fade-out;
  animation-delay: 0s;
  animation-duration: 0.4s;
}

.mdp-contacter-before-txt {
  padding: 12px 0;
}

.mdp-contacter-after-txt {
  padding: 12px 0;
}

.mdp-contacter-recording-animation {
  width: 100%;
}
.mdp-contacter-recording-animation canvas {
  max-width: 384px;
  width: 100%;
}

.mdp-contacter-error {
  border: 1px solid #f24c00;
  border-radius: 0.5rem;
  padding: 1.5rem;
  color: #f24c00;
  font-size: smaller;
  margin: 1rem 0;
}

.mdp-contacter-send-box form {
  width: 100%;
}

.form-group {
  padding-top: 12px;
}

.form-wrap label {
  font-size: 15px;
}

.fb-checkbox {
  display: flex;
  align-items: center;
}

.fb-radio {
  display: flex;
  align-items: center;
}

.form-control {
  width: 100% !important;
  border: 1px solid #ccc !important;
}

.fb-text.field-mdpCurrentURL-preview,
.fb-text.field-mdpUserDetails-preview {
  display: none;
}

.rendered-form .field-mdpUserDetails,
.rendered-form .field-mdpCurrentURL {
  display: none;
}

.frmb-control .input-control-14:before,
.frmb-control .input-control-15:before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 512 512' height='512' viewBox='0 0 512 512' width='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%230274e6' d='m256 0c-141.159 0-256 114.841-256 256s114.841 256 256 256 256-114.841 256-256-114.841-256-256-256zm0 482c-124.617 0-226-101.383-226-226s101.383-226 226-226 226 101.383 226 226-101.383 226-226 226z'/%3E%3Cpath fill='%230274e6' d='m256 270c57.897 0 105-47.103 105-105s-47.103-105-105-105-105 47.103-105 105 47.103 105 105 105zm0-180c41.355 0 75 33.645 75 75s-33.645 75-75 75-75-33.645-75-75 33.645-75 75-75z'/%3E%3Cpath fill='%230274e6' d='m424.649 335.443c-19.933-22.525-48.6-35.443-78.649-35.443h-180c-30.049 0-58.716 12.918-78.649 35.443l-7.11 8.035 5.306 9.325c34.817 61.187 100.131 99.197 170.453 99.197s135.636-38.01 170.454-99.198l5.306-9.325zm-168.649 86.557c-55.736 0-107.761-28.197-138.383-74.295 13.452-11.352 30.579-17.705 48.383-17.705h180c17.804 0 34.931 6.353 48.383 17.705-30.622 46.098-82.647 74.295-138.383 74.295z'/%3E%3C/svg%3E");
  height: 16px;
  width: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.frmb-control .input-control-14:before {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 511.997 511.997' style='enable-background:new 0 0 511.997 511.997;' xml:space='preserve'%3E%3Cpath fill='%230274e6' d='M211.26,389.24l-60.331,60.331c-25.012,25.012-65.517,25.012-90.508,0.005c-24.996-24.996-24.996-65.505-0.005-90.496 l120.683-120.683c24.991-24.992,65.5-24.992,90.491,0c8.331,8.331,21.839,8.331,30.17,0c8.331-8.331,8.331-21.839,0-30.17 c-41.654-41.654-109.177-41.654-150.831,0L30.247,328.909c-41.654,41.654-41.654,109.177,0,150.831 c41.649,41.676,109.177,41.676,150.853,0l60.331-60.331c8.331-8.331,8.331-21.839,0-30.17S219.591,380.909,211.26,389.24z'/%3E%3Cpath fill='%230274e6' d='M479.751,30.24c-41.654-41.654-109.199-41.654-150.853,0l-72.384,72.384c-8.331,8.331-8.331,21.839,0,30.17 c8.331,8.331,21.839,8.331,30.17,0l72.384-72.384c24.991-24.992,65.521-24.992,90.513,0c24.991,24.991,24.991,65.5,0,90.491 L316.845,283.638c-24.992,24.992-65.5,24.992-90.491,0c-8.331-8.331-21.839-8.331-30.17,0s-8.331,21.839,0,30.17 c41.654,41.654,109.177,41.654,150.831,0l132.736-132.736C521.405,139.418,521.405,71.894,479.751,30.24z'/%3E%3C/svg%3E%0A");
}

/* Start Record Button */
.mdp-contacter-start-btn-box,
.mdp-contacter-skip-btn-box {
  display: flex;
  /* Hover animations */
  /* Entrance animations */
  /* Hover animations */
}
.mdp-contacter-start-btn-box.mdp-entrance-bounce,
.mdp-contacter-skip-btn-box.mdp-entrance-bounce {
  animation-fill-mode: both;
  animation-name: contacter-bounce;
  animation-duration: 0.6s;
}
.mdp-contacter-start-btn-box.mdp-entrance-fade,
.mdp-contacter-skip-btn-box.mdp-entrance-fade {
  animation-fill-mode: both;
  animation-name: contacter-fade;
  animation-duration: 0.6s;
}
.mdp-contacter-start-btn-box.mdp-entrance-flip-x,
.mdp-contacter-skip-btn-box.mdp-entrance-flip-x {
  animation-fill-mode: both;
  animation-name: contacter-flip-x;
  animation-duration: 0.8s;
  backface-visibility: visible !important;
}
.mdp-contacter-start-btn-box.mdp-entrance-flip-y,
.mdp-contacter-skip-btn-box.mdp-entrance-flip-y {
  animation-fill-mode: both;
  animation-name: contacter-flip-y;
  animation-duration: 0.8s;
  backface-visibility: visible !important;
}
.mdp-contacter-start-btn-box.mdp-entrance-scale,
.mdp-contacter-skip-btn-box.mdp-entrance-scale {
  animation-fill-mode: both;
  animation-name: contacter-scale;
  animation-duration: 0.4s;
}
.mdp-contacter-start-btn-box.mdp-entrance-wobble,
.mdp-contacter-skip-btn-box.mdp-entrance-wobble {
  animation-fill-mode: both;
  animation-name: contacter-wobble;
  animation-duration: 0.5s;
  backface-visibility: visible !important;
}
.mdp-contacter-start-btn-box.mdp-entrance-rotate,
.mdp-contacter-skip-btn-box.mdp-entrance-rotate {
  animation-fill-mode: both;
  animation-name: contacter-rotate;
  animation-duration: 0.8s;
}
.mdp-contacter-start-btn-box.mdp-hover-bounce button:hover span, .mdp-contacter-start-btn-box.mdp-hover-fade button:hover span, .mdp-contacter-start-btn-box.mdp-hover-flip-x button:hover span, .mdp-contacter-start-btn-box.mdp-hover-flip-y button:hover span, .mdp-contacter-start-btn-box.mdp-hover-scale button:hover span, .mdp-contacter-start-btn-box.mdp-hover-rotate button:hover span, .mdp-contacter-start-btn-box.mdp-hover-wobble button:hover span,
.mdp-contacter-skip-btn-box.mdp-hover-bounce button:hover span,
.mdp-contacter-skip-btn-box.mdp-hover-fade button:hover span,
.mdp-contacter-skip-btn-box.mdp-hover-flip-x button:hover span,
.mdp-contacter-skip-btn-box.mdp-hover-flip-y button:hover span,
.mdp-contacter-skip-btn-box.mdp-hover-scale button:hover span,
.mdp-contacter-skip-btn-box.mdp-hover-rotate button:hover span,
.mdp-contacter-skip-btn-box.mdp-hover-wobble button:hover span {
  animation-fill-mode: both;
}
.mdp-contacter-start-btn-box.mdp-hover-bounce button:hover span:nth-child(2), .mdp-contacter-start-btn-box.mdp-hover-fade button:hover span:nth-child(2), .mdp-contacter-start-btn-box.mdp-hover-flip-x button:hover span:nth-child(2), .mdp-contacter-start-btn-box.mdp-hover-flip-y button:hover span:nth-child(2), .mdp-contacter-start-btn-box.mdp-hover-scale button:hover span:nth-child(2), .mdp-contacter-start-btn-box.mdp-hover-rotate button:hover span:nth-child(2), .mdp-contacter-start-btn-box.mdp-hover-wobble button:hover span:nth-child(2),
.mdp-contacter-skip-btn-box.mdp-hover-bounce button:hover span:nth-child(2),
.mdp-contacter-skip-btn-box.mdp-hover-fade button:hover span:nth-child(2),
.mdp-contacter-skip-btn-box.mdp-hover-flip-x button:hover span:nth-child(2),
.mdp-contacter-skip-btn-box.mdp-hover-flip-y button:hover span:nth-child(2),
.mdp-contacter-skip-btn-box.mdp-hover-scale button:hover span:nth-child(2),
.mdp-contacter-skip-btn-box.mdp-hover-rotate button:hover span:nth-child(2),
.mdp-contacter-skip-btn-box.mdp-hover-wobble button:hover span:nth-child(2) {
  animation-delay: 0.1s;
}
.mdp-contacter-start-btn-box.mdp-hover-bounce button:hover span,
.mdp-contacter-skip-btn-box.mdp-hover-bounce button:hover span {
  animation-name: contacter-bounce;
  animation-duration: 0.6s;
}
.mdp-contacter-start-btn-box.mdp-hover-fade button:hover span,
.mdp-contacter-skip-btn-box.mdp-hover-fade button:hover span {
  animation-name: contacter-fade;
  animation-duration: 0.6s;
}
.mdp-contacter-start-btn-box.mdp-hover-flip-x button:hover span,
.mdp-contacter-skip-btn-box.mdp-hover-flip-x button:hover span {
  animation-name: contacter-flip-x;
  animation-duration: 0.8s;
  backface-visibility: visible !important;
}
.mdp-contacter-start-btn-box.mdp-hover-flip-y button:hover span,
.mdp-contacter-skip-btn-box.mdp-hover-flip-y button:hover span {
  animation-name: contacter-flip-y;
  animation-duration: 0.8s;
  backface-visibility: visible !important;
}
.mdp-contacter-start-btn-box.mdp-hover-scale button:hover span,
.mdp-contacter-skip-btn-box.mdp-hover-scale button:hover span {
  animation-name: contacter-scale;
  animation-duration: 0.4s;
}
.mdp-contacter-start-btn-box.mdp-hover-rotate button:hover span,
.mdp-contacter-skip-btn-box.mdp-hover-rotate button:hover span {
  animation-name: contacter-rotate;
  animation-duration: 0.5s;
}
.mdp-contacter-start-btn-box.mdp-hover-wobble button:hover span,
.mdp-contacter-skip-btn-box.mdp-hover-wobble button:hover span {
  animation-name: contacter-wobble;
  animation-duration: 0.5s;
  backface-visibility: visible !important;
}
.mdp-contacter-start-btn-box .mdp-contacter-start-btn,
.mdp-contacter-start-btn-box .mdp-contacter-skip-btn,
.mdp-contacter-skip-btn-box .mdp-contacter-start-btn,
.mdp-contacter-skip-btn-box .mdp-contacter-skip-btn {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.mdp-contacter-start-btn-box .mdp-contacter-start-btn .mdp-contacter-start-btn-icon,
.mdp-contacter-start-btn-box .mdp-contacter-start-btn .mdp-contacter-skip-btn-icon,
.mdp-contacter-start-btn-box .mdp-contacter-skip-btn .mdp-contacter-start-btn-icon,
.mdp-contacter-start-btn-box .mdp-contacter-skip-btn .mdp-contacter-skip-btn-icon,
.mdp-contacter-skip-btn-box .mdp-contacter-start-btn .mdp-contacter-start-btn-icon,
.mdp-contacter-skip-btn-box .mdp-contacter-start-btn .mdp-contacter-skip-btn-icon,
.mdp-contacter-skip-btn-box .mdp-contacter-skip-btn .mdp-contacter-start-btn-icon,
.mdp-contacter-skip-btn-box .mdp-contacter-skip-btn .mdp-contacter-skip-btn-icon {
  display: flex;
  align-self: center;
}
.mdp-contacter-start-btn-box .mdp-contacter-start-btn.mdp-icon-position-before,
.mdp-contacter-start-btn-box .mdp-contacter-skip-btn.mdp-icon-position-before,
.mdp-contacter-skip-btn-box .mdp-contacter-start-btn.mdp-icon-position-before,
.mdp-contacter-skip-btn-box .mdp-contacter-skip-btn.mdp-icon-position-before {
  flex-direction: row;
}
.mdp-contacter-start-btn-box .mdp-contacter-start-btn.mdp-icon-position-before > span:nth-child(2),
.mdp-contacter-start-btn-box .mdp-contacter-skip-btn.mdp-icon-position-before > span:nth-child(2),
.mdp-contacter-skip-btn-box .mdp-contacter-start-btn.mdp-icon-position-before > span:nth-child(2),
.mdp-contacter-skip-btn-box .mdp-contacter-skip-btn.mdp-icon-position-before > span:nth-child(2) {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}
.mdp-contacter-start-btn-box .mdp-contacter-start-btn.mdp-icon-position-after,
.mdp-contacter-start-btn-box .mdp-contacter-skip-btn.mdp-icon-position-after,
.mdp-contacter-skip-btn-box .mdp-contacter-start-btn.mdp-icon-position-after,
.mdp-contacter-skip-btn-box .mdp-contacter-skip-btn.mdp-icon-position-after {
  flex-direction: row-reverse;
}
.mdp-contacter-start-btn-box .mdp-contacter-start-btn.mdp-icon-position-after > span:nth-child(2),
.mdp-contacter-start-btn-box .mdp-contacter-skip-btn.mdp-icon-position-after > span:nth-child(2),
.mdp-contacter-skip-btn-box .mdp-contacter-start-btn.mdp-icon-position-after > span:nth-child(2),
.mdp-contacter-skip-btn-box .mdp-contacter-skip-btn.mdp-icon-position-after > span:nth-child(2) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}
.mdp-contacter-start-btn-box .mdp-contacter-start-btn.mdp-icon-position-above,
.mdp-contacter-start-btn-box .mdp-contacter-skip-btn.mdp-icon-position-above,
.mdp-contacter-skip-btn-box .mdp-contacter-start-btn.mdp-icon-position-above,
.mdp-contacter-skip-btn-box .mdp-contacter-skip-btn.mdp-icon-position-above {
  flex-direction: column;
}
.mdp-contacter-start-btn-box .mdp-contacter-start-btn.mdp-icon-position-above > span:nth-child(2),
.mdp-contacter-start-btn-box .mdp-contacter-skip-btn.mdp-icon-position-above > span:nth-child(2),
.mdp-contacter-skip-btn-box .mdp-contacter-start-btn.mdp-icon-position-above > span:nth-child(2),
.mdp-contacter-skip-btn-box .mdp-contacter-skip-btn.mdp-icon-position-above > span:nth-child(2) {
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}
.mdp-contacter-start-btn-box .mdp-contacter-start-btn.mdp-icon-position-bellow,
.mdp-contacter-start-btn-box .mdp-contacter-skip-btn.mdp-icon-position-bellow,
.mdp-contacter-skip-btn-box .mdp-contacter-start-btn.mdp-icon-position-bellow,
.mdp-contacter-skip-btn-box .mdp-contacter-skip-btn.mdp-icon-position-bellow {
  flex-direction: column-reverse;
}
.mdp-contacter-start-btn-box .mdp-contacter-start-btn.mdp-icon-position-bellow > span:nth-child(2),
.mdp-contacter-start-btn-box .mdp-contacter-skip-btn.mdp-icon-position-bellow > span:nth-child(2),
.mdp-contacter-skip-btn-box .mdp-contacter-start-btn.mdp-icon-position-bellow > span:nth-child(2),
.mdp-contacter-skip-btn-box .mdp-contacter-skip-btn.mdp-icon-position-bellow > span:nth-child(2) {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* Buttons */
.mdp-speak-now-btns,
.mdp-contacter-reset-box,
.mdp-send-btns {
  /* Entrance animations */
  /* Hover animations */
}
.mdp-speak-now-btns.mdp-entrance-bounce,
.mdp-contacter-reset-box.mdp-entrance-bounce,
.mdp-send-btns.mdp-entrance-bounce {
  animation-fill-mode: both;
  animation-name: contacter-bounce;
  animation-duration: 0.6s;
}
.mdp-speak-now-btns.mdp-entrance-fade,
.mdp-contacter-reset-box.mdp-entrance-fade,
.mdp-send-btns.mdp-entrance-fade {
  animation-fill-mode: both;
  animation-name: contacter-fade;
  animation-duration: 0.6s;
}
.mdp-speak-now-btns.mdp-entrance-flip-x,
.mdp-contacter-reset-box.mdp-entrance-flip-x,
.mdp-send-btns.mdp-entrance-flip-x {
  animation-fill-mode: both;
  animation-name: contacter-flip-x;
  animation-duration: 0.8s;
  backface-visibility: visible !important;
}
.mdp-speak-now-btns.mdp-entrance-flip-y,
.mdp-contacter-reset-box.mdp-entrance-flip-y,
.mdp-send-btns.mdp-entrance-flip-y {
  animation-fill-mode: both;
  animation-name: contacter-flip-y;
  animation-duration: 0.8s;
  backface-visibility: visible !important;
}
.mdp-speak-now-btns.mdp-entrance-scale,
.mdp-contacter-reset-box.mdp-entrance-scale,
.mdp-send-btns.mdp-entrance-scale {
  animation-fill-mode: both;
  animation-name: contacter-scale;
  animation-duration: 0.4s;
}
.mdp-speak-now-btns.mdp-entrance-wobble,
.mdp-contacter-reset-box.mdp-entrance-wobble,
.mdp-send-btns.mdp-entrance-wobble {
  animation-fill-mode: both;
  animation-name: contacter-wobble;
  animation-duration: 0.5s;
  backface-visibility: visible !important;
}
.mdp-speak-now-btns.mdp-entrance-rotate,
.mdp-contacter-reset-box.mdp-entrance-rotate,
.mdp-send-btns.mdp-entrance-rotate {
  animation-fill-mode: both;
  animation-name: contacter-rotate;
  animation-duration: 0.8s;
}
.mdp-speak-now-btns.mdp-hover-bounce button:hover span, .mdp-speak-now-btns.mdp-hover-fade button:hover span, .mdp-speak-now-btns.mdp-hover-flip-x button:hover span, .mdp-speak-now-btns.mdp-hover-flip-y button:hover span, .mdp-speak-now-btns.mdp-hover-scale button:hover span, .mdp-speak-now-btns.mdp-hover-rotate button:hover span, .mdp-speak-now-btns.mdp-hover-wobble button:hover span,
.mdp-contacter-reset-box.mdp-hover-bounce button:hover span,
.mdp-contacter-reset-box.mdp-hover-fade button:hover span,
.mdp-contacter-reset-box.mdp-hover-flip-x button:hover span,
.mdp-contacter-reset-box.mdp-hover-flip-y button:hover span,
.mdp-contacter-reset-box.mdp-hover-scale button:hover span,
.mdp-contacter-reset-box.mdp-hover-rotate button:hover span,
.mdp-contacter-reset-box.mdp-hover-wobble button:hover span,
.mdp-send-btns.mdp-hover-bounce button:hover span,
.mdp-send-btns.mdp-hover-fade button:hover span,
.mdp-send-btns.mdp-hover-flip-x button:hover span,
.mdp-send-btns.mdp-hover-flip-y button:hover span,
.mdp-send-btns.mdp-hover-scale button:hover span,
.mdp-send-btns.mdp-hover-rotate button:hover span,
.mdp-send-btns.mdp-hover-wobble button:hover span {
  animation-fill-mode: both;
}
.mdp-speak-now-btns.mdp-hover-bounce button:hover span:nth-child(2), .mdp-speak-now-btns.mdp-hover-fade button:hover span:nth-child(2), .mdp-speak-now-btns.mdp-hover-flip-x button:hover span:nth-child(2), .mdp-speak-now-btns.mdp-hover-flip-y button:hover span:nth-child(2), .mdp-speak-now-btns.mdp-hover-scale button:hover span:nth-child(2), .mdp-speak-now-btns.mdp-hover-rotate button:hover span:nth-child(2), .mdp-speak-now-btns.mdp-hover-wobble button:hover span:nth-child(2),
.mdp-contacter-reset-box.mdp-hover-bounce button:hover span:nth-child(2),
.mdp-contacter-reset-box.mdp-hover-fade button:hover span:nth-child(2),
.mdp-contacter-reset-box.mdp-hover-flip-x button:hover span:nth-child(2),
.mdp-contacter-reset-box.mdp-hover-flip-y button:hover span:nth-child(2),
.mdp-contacter-reset-box.mdp-hover-scale button:hover span:nth-child(2),
.mdp-contacter-reset-box.mdp-hover-rotate button:hover span:nth-child(2),
.mdp-contacter-reset-box.mdp-hover-wobble button:hover span:nth-child(2),
.mdp-send-btns.mdp-hover-bounce button:hover span:nth-child(2),
.mdp-send-btns.mdp-hover-fade button:hover span:nth-child(2),
.mdp-send-btns.mdp-hover-flip-x button:hover span:nth-child(2),
.mdp-send-btns.mdp-hover-flip-y button:hover span:nth-child(2),
.mdp-send-btns.mdp-hover-scale button:hover span:nth-child(2),
.mdp-send-btns.mdp-hover-rotate button:hover span:nth-child(2),
.mdp-send-btns.mdp-hover-wobble button:hover span:nth-child(2) {
  animation-delay: 0.1s;
}
.mdp-speak-now-btns.mdp-hover-bounce button:hover span,
.mdp-contacter-reset-box.mdp-hover-bounce button:hover span,
.mdp-send-btns.mdp-hover-bounce button:hover span {
  animation-name: contacter-bounce;
  animation-duration: 0.6s;
}
.mdp-speak-now-btns.mdp-hover-fade button:hover span,
.mdp-contacter-reset-box.mdp-hover-fade button:hover span,
.mdp-send-btns.mdp-hover-fade button:hover span {
  animation-name: contacter-fade;
  animation-duration: 0.6s;
}
.mdp-speak-now-btns.mdp-hover-flip-x button:hover span,
.mdp-contacter-reset-box.mdp-hover-flip-x button:hover span,
.mdp-send-btns.mdp-hover-flip-x button:hover span {
  animation-name: contacter-flip-x;
  animation-duration: 0.8s;
  backface-visibility: visible !important;
}
.mdp-speak-now-btns.mdp-hover-flip-y button:hover span,
.mdp-contacter-reset-box.mdp-hover-flip-y button:hover span,
.mdp-send-btns.mdp-hover-flip-y button:hover span {
  animation-name: contacter-flip-y;
  animation-duration: 0.8s;
  backface-visibility: visible !important;
}
.mdp-speak-now-btns.mdp-hover-scale button:hover span,
.mdp-contacter-reset-box.mdp-hover-scale button:hover span,
.mdp-send-btns.mdp-hover-scale button:hover span {
  animation-name: contacter-scale;
  animation-duration: 0.4s;
}
.mdp-speak-now-btns.mdp-hover-rotate button:hover span,
.mdp-contacter-reset-box.mdp-hover-rotate button:hover span,
.mdp-send-btns.mdp-hover-rotate button:hover span {
  animation-name: contacter-rotate;
  animation-duration: 0.5s;
}
.mdp-speak-now-btns.mdp-hover-wobble button:hover span,
.mdp-contacter-reset-box.mdp-hover-wobble button:hover span,
.mdp-send-btns.mdp-hover-wobble button:hover span {
  animation-name: contacter-wobble;
  animation-duration: 0.5s;
  backface-visibility: visible !important;
}
.mdp-speak-now-btns button span,
.mdp-contacter-reset-box button span,
.mdp-send-btns button span {
  display: block;
}

/* Floating Button */
.mdp-contacter-fbutton-box {
  position: fixed;
  z-index: 999;
  /* Hover animations */
  /* Entrance animations */
  /* Hover animations */
}
.mdp-contacter-fbutton-box.top-left {
  top: 0;
  left: 0;
}
.mdp-contacter-fbutton-box.top-right {
  top: 0;
  right: 0;
}
.mdp-contacter-fbutton-box.left-center {
  top: 50%;
  left: 0;
  transform: translate(0%, -50%);
}
.mdp-contacter-fbutton-box.right-center {
  top: 50%;
  right: 0;
  transform: translate(0%, -50%);
}
.mdp-contacter-fbutton-box.bottom-left {
  bottom: 0;
  left: 0;
}
.mdp-contacter-fbutton-box.bottom-center {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0%);
}
.mdp-contacter-fbutton-box.bottom-right {
  bottom: 0;
  right: 0;
}
.mdp-contacter-fbutton-box.mdp-entrance-bounce {
  animation-fill-mode: both;
  animation-name: contacter-bounce;
  animation-duration: 0.6s;
}
.mdp-contacter-fbutton-box.mdp-entrance-fade {
  animation-fill-mode: both;
  animation-name: contacter-fade;
  animation-duration: 0.6s;
}
.mdp-contacter-fbutton-box.mdp-entrance-flip-x {
  animation-fill-mode: both;
  animation-name: contacter-flip-x;
  animation-duration: 0.8s;
  backface-visibility: visible !important;
}
.mdp-contacter-fbutton-box.mdp-entrance-flip-y {
  animation-fill-mode: both;
  animation-name: contacter-flip-y;
  animation-duration: 0.8s;
  backface-visibility: visible !important;
}
.mdp-contacter-fbutton-box.mdp-entrance-scale {
  animation-fill-mode: both;
  animation-name: contacter-scale;
  animation-duration: 0.4s;
}
.mdp-contacter-fbutton-box.mdp-entrance-wobble {
  animation-fill-mode: both;
  animation-name: contacter-wobble;
  animation-duration: 0.5s;
  backface-visibility: visible !important;
}
.mdp-contacter-fbutton-box.mdp-entrance-rotate {
  animation-fill-mode: both;
  animation-name: contacter-rotate;
  animation-duration: 0.8s;
}
.mdp-contacter-fbutton-box.mdp-hover-bounce button:hover span, .mdp-contacter-fbutton-box.mdp-hover-fade button:hover span, .mdp-contacter-fbutton-box.mdp-hover-flip-x button:hover span, .mdp-contacter-fbutton-box.mdp-hover-flip-y button:hover span, .mdp-contacter-fbutton-box.mdp-hover-scale button:hover span, .mdp-contacter-fbutton-box.mdp-hover-rotate button:hover span, .mdp-contacter-fbutton-box.mdp-hover-wobble button:hover span {
  animation-fill-mode: both;
}
.mdp-contacter-fbutton-box.mdp-hover-bounce button:hover span:nth-child(2), .mdp-contacter-fbutton-box.mdp-hover-fade button:hover span:nth-child(2), .mdp-contacter-fbutton-box.mdp-hover-flip-x button:hover span:nth-child(2), .mdp-contacter-fbutton-box.mdp-hover-flip-y button:hover span:nth-child(2), .mdp-contacter-fbutton-box.mdp-hover-scale button:hover span:nth-child(2), .mdp-contacter-fbutton-box.mdp-hover-rotate button:hover span:nth-child(2), .mdp-contacter-fbutton-box.mdp-hover-wobble button:hover span:nth-child(2) {
  animation-delay: 0.1s;
}
.mdp-contacter-fbutton-box.mdp-hover-bounce button:hover span {
  animation-name: contacter-bounce;
  animation-duration: 0.6s;
}
.mdp-contacter-fbutton-box.mdp-hover-fade button:hover span {
  animation-name: contacter-fade;
  animation-duration: 0.6s;
}
.mdp-contacter-fbutton-box.mdp-hover-flip-x button:hover span {
  animation-name: contacter-flip-x;
  animation-duration: 0.8s;
  backface-visibility: visible !important;
}
.mdp-contacter-fbutton-box.mdp-hover-flip-y button:hover span {
  animation-name: contacter-flip-y;
  animation-duration: 0.8s;
  backface-visibility: visible !important;
}
.mdp-contacter-fbutton-box.mdp-hover-scale button:hover span {
  animation-name: contacter-scale;
  animation-duration: 0.4s;
}
.mdp-contacter-fbutton-box.mdp-hover-rotate button:hover span {
  animation-name: contacter-rotate;
  animation-duration: 0.5s;
}
.mdp-contacter-fbutton-box.mdp-hover-wobble button:hover span {
  animation-name: contacter-wobble;
  animation-duration: 0.5s;
  backface-visibility: visible !important;
}
.mdp-contacter-fbutton-box button {
  display: flex;
  align-items: center;
  outline: none;
  /* Icon position */
}
.mdp-contacter-fbutton-box button:hover, .mdp-contacter-fbutton-box button:focus {
  text-decoration: none;
}
.mdp-contacter-fbutton-box button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--mdp-contacter-bg-color);
}
.mdp-contacter-fbutton-box button .mdp-contacter-fbutton-icon {
  display: flex;
  align-self: center;
}
.mdp-contacter-fbutton-box button.mdp-icon-position-before {
  flex-direction: row;
}
.mdp-contacter-fbutton-box button.mdp-icon-position-before span:nth-child(2) {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}
.mdp-contacter-fbutton-box button.mdp-icon-position-after {
  flex-direction: row-reverse;
}
.mdp-contacter-fbutton-box button.mdp-icon-position-after span:nth-child(2) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}
.mdp-contacter-fbutton-box button.mdp-icon-position-above {
  flex-direction: column;
}
.mdp-contacter-fbutton-box button.mdp-icon-position-above span:nth-child(2) {
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}
.mdp-contacter-fbutton-box button.mdp-icon-position-bellow {
  flex-direction: column-reverse;
}
.mdp-contacter-fbutton-box button.mdp-icon-position-bellow span:nth-child(2) {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.mdp-contacter-fbutton-box button span,
.mdp-contacter-fbutton-box button span path {
  transition: all 0.15s linear;
}

/* For all buttons */
.mdp-contacter-form-box button, .mdp-contacter-form-box button:hover, .mdp-contacter-form-box button:focus, .mdp-contacter-form-box button:active, .mdp-contacter-form-box button:visited {
  outline: none;
  transition: 0.4s;
}
.mdp-contacter-form-box button svg, .mdp-contacter-form-box button:hover svg, .mdp-contacter-form-box button:focus svg, .mdp-contacter-form-box button:active svg, .mdp-contacter-form-box button:visited svg {
  background: none;
}
.mdp-contacter-form-box button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--contacter-btn-color);
}
.mdp-contacter-form-box button:focus svg {
  background: none;
}

/* Float button */
.mdp-contacter-fbutton-box {
  margin: var(--mdp-contacter-margin);
}
.mdp-contacter-fbutton-box button {
  padding: var(--mdp-contacter-padding);
  border-radius: var(--mdp-contacter-radius);
  color: var(--mdp-contacter-color);
  background: var(--mdp-contacter-bg-color);
  font-size: var(--mdp-contacter-size);
}
.mdp-contacter-fbutton-box button .mdp-contacter-fbutton-icon svg {
  fill: var(--mdp-contacter-color);
  width: var(--mdp-contacter-size);
  height: var(--mdp-contacter-size);
}
.mdp-contacter-fbutton-box:hover button {
  color: var(--mdp-contacter-color-hover);
  background: var(--mdp-contacter-bg-color-hover);
}
.mdp-contacter-fbutton-box:hover button .mdp-contacter-fbutton-icon svg {
  fill: var(--mdp-contacter-color-hover);
}
.mdp-contacter-fbutton-box.mdp-entrance-bounce, .mdp-contacter-fbutton-box.mdp-entrance-fade, .mdp-contacter-fbutton-box.mdp-entrance-flip-x, .mdp-contacter-fbutton-box.mdp-entrance-flip-y, .mdp-contacter-fbutton-box.mdp-entrance-scale, .mdp-contacter-fbutton-box.mdp-entrance-wobble, .mdp-contacter-fbutton-box.mdp-entrance-rotate {
  animation-delay: var(--mdp-contacter-delay);
}

.mdp-contacter-fbutton-box button#mdp-contacter-fbutton span:nth-child(2),
.mdp-contacter-start-btn span:nth-child(2),
.mdp-contacter-skip-btn span:nth-child(2) {
  padding: calc(var(--mdp-contacter-padding) / 2);
}

/* Modal Popup */
.mdp-contacter-fbutton-overlay {
  background: var(--mdp-contacter-overlay-bg);
}

.mdp-contacter-fbutton-overlay .mdp-contacter-fbutton-modal {
  background: var(--mdp-contacter-modal-bg);
  border-radius: var(--mdp-contacter-modal-radius);
}

/** Green Player */
.mdp-contacter-player-box.green-audio-player .slider .gap-progress,
.mdp-contacter-player-box.green-audio-player .slider .gap-progress .pin {
  background-color: var(--mdp-contacter-accent-color);
}

.mdp-contacter-player-box.green-audio-player .volume .volume__button.open path {
  fill: var(--mdp-contacter-accent-color);
}

.mdp-contacter-modal-opened .mdp-contacter-fbutton-box {
  transition: 0.5s;
  opacity: 0;
  display: none;
}