html, body {
      height: 100%;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #ffffff;
}

.loader {
  position: relative;
  width: 60px;
  height: 60px;
}

.arc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  animation: spin 1s linear infinite;
  will-change: transform;
}

.arc::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-radius: 50%;
  background: linear-gradient(to right, #F05053, #E1EEC3) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  box-sizing: border-box;
}

.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 35px;
  pointer-events: none;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Hide the button container during initialization */
#g_id_onload,
.g_id_signin {
  visibility: hidden !important;
}

/* Show only when fully rendered (when it has the continue_with text) */
.nsm7Bb-HzV7m-LgbsSe[data-text="continue_with"],
.nsm7Bb-HzV7m-LgbsSe[data-text="signin_with"],
.nsm7Bb-HzV7m-LgbsSe[data-text="signup_with"] {
  visibility: visible !important;
}

/* Hide the "getting ready" state */
.nsm7Bb-HzV7m-LgbsSe[data-text="getting_ready"] {
  visibility: hidden !important;
}