@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

:root {
  --cert-teal: #005856;
  --cert-teal-hover: #004845;
  --cert-dark: #171725;
  --cert-text-muted: #7e84a3;
  --cert-border: #e5e7eb;
  --cert-bg-image: url("https://skills.cert4tech.com/static/cert4tech/assets/img/login-bg-xd-recreation.svg");
}

html {
  height: 100% !important;
  overflow: hidden !important;
}

html,
body {
  font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background-color: var(--cert-teal) !important;
  background-image: var(--cert-bg-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  margin: 0 !important;
}

body {
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
}

#root {
  height: 100% !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
  background: transparent !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 24px !important;
}

#root > div,
#root > div > div,
#root > div > div > div,
.cert4tech-authn-shell {
  background: transparent !important;
  background-image: none !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  overflow: visible !important;
}

#root .row {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background: transparent !important;
}

#root [class*="col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.cert4tech-authn-card {
  width: 100% !important;
  max-width: 480px !important;
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
}

#root svg[class*="screen-svg"],
#root svg.medium-screen-svg-primary,
#root svg.extra-large-screen-svg-primary,
.extra-large-screen-top-stripe,
.medium-screen-top-stripe,
.small-screen-top-stripe,
.large-screen-top-stripe,
[class*="screen-top-stripe"],
[class*="screen-svg"],
[class*="yellow-line"],
.bg-primary-400,
.main-heading,
.layout > .w-100.medium-screen-top-stripe,
.layout > .col-md-12.extra-large-screen-top-stripe {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: none !important;
  filter: none !important;
}

.layout::before,
.layout::after,
.extra-large-screen-top-stripe::before,
.extra-large-screen-top-stripe::after,
.medium-screen-top-stripe::before,
.medium-screen-top-stripe::after,
.cert4tech-authn-shell::before,
.cert4tech-authn-shell::after {
  display: none !important;
  content: none !important;
  background: none !important;
  filter: none !important;
}

#cert4tech-login-logo-wrap {
  display: flex !important;
  justify-content: center !important;
  margin: 0 auto 24px !important;
  padding-top: 4px !important;
}

#cert4tech-login-logo {
  display: block !important;
  width: 220px !important;
  max-width: 80% !important;
  height: auto !important;
}

.pgn__form-label,
label {
  font-size: 12px !important;
  color: var(--cert-text-muted) !important;
}

.pgn__form-control,
.form-control,
input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100% !important;
  height: 44px !important;
  border-radius: 8px !important;
  border: 1px solid var(--cert-border) !important;
  background: #fff !important;
  font-size: 14px !important;
  color: var(--cert-dark) !important;
}

.pgn__btn-brand,
.btn-brand,
button[type="submit"],
button.btn-primary {
  width: 100% !important;
  height: 44px !important;
  border-radius: 8px !important;
  background: var(--cert-teal) !important;
  border-color: var(--cert-teal) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.pgn__btn-brand *,
.btn-brand *,
button[type="submit"] * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  visibility: visible !important;
  opacity: 1 !important;
}

footer,
[role="contentinfo"],
.pgn__footer {
  display: none !important;
}