.google-auth-host {
  width: 100%;
  min-height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 4px;
}
.google-auth-host[hidden] { display: none; }
.google-auth-host>div,
.google-auth-host iframe { width: 100% !important; }
.google-auth[hidden] { display: none !important; }
.google-auth.is-loading { opacity: .62; cursor: progress; }
.google-auth:disabled { opacity: .58; cursor: not-allowed; }

/* The rendered login panel already contains the visual Google plate. Keep the
   official GIS control inside that plate instead of letting it enter page flow. */
.art-login .auth #google-auth-host {
  position: absolute !important;
  z-index: 5;
  left: 22.28164%;
  top: 43.15264%;
  width: 55.61497%;
  height: 5.99144%;
  min-height: 0;
  margin: 0;
  border-radius: 0;
  cursor: pointer;
  clip-path: polygon(3% 0,97% 0,100% 17%,100% 83%,97% 100%,3% 100%,0 83%,0 17%);
}
.art-login .auth #google-auth-host:hover {
  background: rgba(103, 203, 255, .05);
  filter: drop-shadow(0 0 4px rgba(112, 213, 255, .53));
}
.art-login .auth #google-auth-host > div {
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  place-items: center;
}
.art-login .auth #google-auth-host iframe {
  display: block;
  max-width: 100%;
}
.art-login .auth .google-auth-art-mask {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  clip-path: polygon(22.28164% 43.15264%,77.89661% 43.15264%,77.89661% 49.14408%,22.28164% 49.14408%);
}
@media (max-height: 760px) and (min-width: 901px) { .google-auth-host { min-height: 40px; } }
@media (max-width: 900px) and (orientation: landscape) { .google-auth-host { min-height: 38px; } }