.login-view {
  overflow-x: clip;
}

.antibody-large-graphic {
  position: absolute;
  height: 211px;
  width: 241px;
  left: 31px;
  -webkit-transform: translateX(calc(40vw - 400px)) rotate(-45deg);
  transform: translateX(calc(40vw - 400px)) rotate(-45deg);
  z-index: -999;
}

.antibody-small-graphic {
  position: absolute;
  height: 211px;
  width: 101px;
  left: 0;
  top: -100px;
  -webkit-transform: translateX(calc(40vw - 400px)) rotate(45deg);
  transform: translateX(calc(40vw - 400px)) rotate(45deg);
  z-index: -999;
}

.login-card {
  margin-top: 2rem;
  background-color: var(--addgene-light-gray);
  padding: 40px;
  border-radius: var(--datahub-large-panel-border-radius);
}

.login-card-header {
  color: var(--datahub-green);
}

.login-card-header + p {
  font-weight: 500;
}

a.addgene-provider-btn {
  height: 70px;
  color: #fff;
  background-color: var(--addgene-blue);
  font-weight: 700;
}

.login-card .addgene-icon {
  margin-right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  background: url('../assets/addgene-icon.svg')  no-repeat center / contain;
}

a.addgene-provider-btn:first-child:hover {
  color: #fff;
  background-color: var(--addgene-dark-blue);
  text-decoration: none;
}

a.google-provider-btn {
  height: 70px;
  background-color: #fff;
  color: var(--addgene-dark-gray);
  border: 1px solid var(--addgene-dark-gray);
  font-weight: 700;
}

:not(.btn-check)+.google-provider-btn:hover {
  background-color: var(--addgene-light-gray);
  border: 1px solid var(--addgene-dark-gray);
  text-decoration: none;
}

.login-card .google-icon {
  margin-right: 1rem;
  width: 2rem;
  height: 2rem;
  background: url('../vendor/google-icon.svg') no-repeat center / contain;
}

.btn-separator {
  margin-top: 1.8rem;
  margin-bottom: 1.8rem;
}

.btn-separator:after,.btn-separator:before {
  content: "";
  position: absolute;
  top: 50%;
  width: 999px;
  height: 1px;
  background: var(--datahub-gray-border);
}

.btn-separator:before {
  right: 100%;
  margin-right: 15px;
}

.btn-separator:after {
  left: 100%;
  margin-left: 15px;
}

.virus-large-graphic {
  width: 241px;
  left: 0;
  top: 350px;
  -webkit-transform: translateX(calc(50vw + 350px)) rotate(-40deg);
  transform: translateX(calc(50vw + 350px)) rotate(-40deg);
}

.virus-large-graphic,.virus-small-graphic {
  position: absolute;
  height: 211px;
  z-index: -999;
}

.virus-small-graphic {
  width: 80px;
  top: 250px;
  left: calc(50vw + 320px);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}