@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@700;800&display=swap");

:root {
  --yookan-ink: #20282d;
  --yookan-muted: #69777f;
  --yookan-line: #dfe5e4;
  --yookan-teal: #147d73;
  --yookan-teal-dark: #0d635c;
  --yookan-teal-pale: #e8f4f1;
  --yookan-lime: #c6e96b;
}

body,
.login-pf body,
.pf-v5-c-login,
.pf-v5-c-login__main,
.pf-v5-c-login__container {
  font-family: "DM Sans", sans-serif;
}

.login-pf body,
.pf-v5-c-background-image {
  background:
    radial-gradient(circle at 13% 17%, rgba(255, 111, 97, .48), transparent 28%),
    radial-gradient(circle at 88% 80%, rgba(38, 199, 177, .52), transparent 31%),
    linear-gradient(135deg, #ffe38e 0%, #ffb9b0 48%, #a7e9df 100%);
}

.pf-v5-c-background-image::before,
.pf-v5-c-background-image::after,
.pf-v5-c-background-image__filter,
.login-pf-page-header {
  display: none;
}

.pf-v5-c-login__container {
  grid-template-areas: "main";
  grid-template-columns: minmax(0, 470px);
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  padding: 28px;
}

.pf-v5-c-login::before,
.pf-v5-c-login::after {
  position: fixed;
  z-index: 0;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.pf-v5-c-login::before {
  width: 220px;
  height: 220px;
  left: -85px;
  bottom: -70px;
  background: #ffcf4a;
}

.pf-v5-c-login::after {
  width: 180px;
  height: 180px;
  right: -60px;
  top: -60px;
  background: #fd6d64;
}

.pf-v5-c-login__main {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 32px;
  background: rgba(255, 253, 246, .95);
  box-shadow: 0 28px 80px rgba(59, 60, 48, .22), inset 0 1px 0 #fff;
  animation: yookan-card-in .55s cubic-bezier(.2, .85, .25, 1) both;
}

.pf-v5-c-login__main-header {
  padding: 46px 48px 20px;
}

.pf-v5-c-login__main-header::before {
  content: "yookan";
  display: block;
  margin-bottom: 42px;
  color: var(--yookan-teal);
  font: 800 34px/1 "Manrope", sans-serif;
  letter-spacing: -1.8px;
}

.pf-v5-c-title,
#kc-page-title {
  color: var(--yookan-ink);
  font: 800 30px/1.2 "Manrope", sans-serif;
  letter-spacing: -.8px;
  text-align: left;
}

.pf-v5-c-login__main-body {
  padding: 4px 48px 48px;
}

.pf-v5-c-form__label-text,
label {
  color: #46544f;
  font-size: 12px;
  font-weight: 700;
}

.pf-v5-c-form-control,
input[type="text"],
input[type="email"],
input[type="password"] {
  min-height: 48px;
  border-color: #ccd8d4;
  border-radius: 9px;
  background: #fbfcfc;
  color: var(--yookan-ink);
  box-shadow: none;
}

.pf-v5-c-form-control:focus-within,
input:focus {
  border-color: var(--yookan-teal);
  box-shadow: 0 0 0 3px var(--yookan-teal-pale);
  outline: none;
}

.pf-v5-c-button.pf-m-primary,
#kc-login {
  min-height: 48px;
  border-radius: 999px;
  background: var(--yookan-teal);
  font-weight: 700;
  box-shadow: 0 5px 14px rgba(20, 125, 115, .18);
}

#kc-login::after {
  content: "→";
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin-left: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
}

.pf-v5-c-button.pf-m-primary:hover,
#kc-login:hover {
  background: var(--yookan-teal-dark);
}

a {
  color: var(--yookan-teal-dark);
  font-weight: 600;
}

a:hover {
  color: var(--yookan-teal);
}

#kc-info-wrapper,
.pf-v5-c-login__main-footer-band {
  border-top: 1px solid var(--yookan-line);
  background: rgba(255,255,255,.28);
}

@keyframes yookan-card-in {
  from { opacity: 0; transform: scale(.92) translateY(14px); }
  to { opacity: 1; transform: none; }
}

.alert-error,
.pf-v5-c-alert.pf-m-danger {
  border-radius: 9px;
}

@media (max-width: 520px) {
  .pf-v5-c-login__container { padding: 0; align-content: stretch; }
  .pf-v5-c-login__main { border-radius: 28px; }
  .pf-v5-c-login__main-header { padding: 38px 28px 18px; }
  .pf-v5-c-login__main-body { padding: 4px 28px 38px; }
}