body {
  padding: 0;
  margin: 0;
}

.google-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.9999992847442627 0 17.639999389648438 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.64 12.2044C20.64 11.5663 20.5827 10.9526 20.4764 10.3635H12V13.8449H16.8436C16.635 14.9699 16.0009 15.9231 15.0477 16.5613V18.8194H17.9564C19.6582 17.2526 20.64 14.9453 20.64 12.2044Z' fill='%234285F4'%3E%3C/path%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 21C14.43 21 16.4673 20.1941 17.9564 18.8195L15.0477 16.5613C14.2418 17.1013 13.2109 17.4204 12 17.4204C9.656 17.4204 7.6718 15.8372 6.964 13.71H3.9574V16.0418C5.4382 18.9831 8.4818 21 12 21Z' fill='%2334A853'%3E%3C/path%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.964 13.7101C6.784 13.1701 6.6818 12.5932 6.6818 12.0001C6.6818 11.4069 6.7841 10.8301 6.9641 10.2901V7.95819H3.9573C3.32728 9.21237 2.99945 10.5966 3 12.0001C3 13.4523 3.3477 14.8269 3.9573 16.0419L6.9641 13.7101H6.964Z' fill='%23FBBC05'%3E%3C/path%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 6.5795C13.3214 6.5795 14.5077 7.0336 15.4405 7.9255L18.0218 5.3441C16.4632 3.8918 14.4259 3 12 3C8.48178 3 5.43818 5.0168 3.95728 7.9582L6.96398 10.29C7.67178 8.1627 9.65588 6.5795 12 6.5795Z' fill='%23EA4335'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  background-size: 100% !important;
}

.google-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  line-height: 1.2;
}

.google-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 1px;
}

.zoom-in {
  animation: zoom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes zoom {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.fade-out {
  animation: fade 0.5s forwards;
}

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: green;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: green;
  stroke-miterlimit: 10;
  margin: 1% auto;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #fff;
  }
}