/* WS3_LOGIN_V3 */

body.ws3-login-page {
  min-width:0;
  min-height:100vh;
  background:
    radial-gradient(ellipse at 12% 10%,
      rgba(65,132,106,.24),transparent 45%),
    radial-gradient(ellipse at 92% 90%,
      rgba(39,89,86,.25),transparent 42%),
    #0b1518 !important;
  color:#edf8f0;
  color-scheme:dark;
}

body.ws3-login-page *,
body.ws3-login-page *::before,
body.ws3-login-page *::after {
  box-sizing:border-box;
}

/* Remove the legacy navigation on the login screen only */
body.ws3-login-page .topbar,
body.ws3-login-page .sidebar {
  display:none !important;
}

body.ws3-login-page .layout {
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-height:100vh;
  background:transparent !important;
}

body.ws3-login-page .content {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  width:100% !important;
  max-width:100% !important;
  padding:40px 18px !important;
  margin:0 !important;
  background:transparent !important;
}

/* Login brand */
.ws3-login-brand {
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:8px;
  margin:0 auto 29px;
  text-align:center;
}

.ws3-login-brand-name {
  font-size:clamp(31px,6vw,43px);
  font-weight:800;
  letter-spacing:-1.8px;
  line-height:1.1;
  color:#ecfaf2;
}

.ws3-login-brand-name span {
  color:#9fe4c5;
}

.ws3-login-brand p {
  margin:0;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#9dbbac;
  font-weight:650;
}

/* Main card */
body.ws3-login-page .login-wrap {
  width:100% !important;
  max-width:450px !important;
  margin:0 auto !important;
  padding:0 !important;
}

body.ws3-login-page .login-card {
  width:100%;
  max-width:100%;
  padding:clamp(23px,5vw,39px) !important;
  border:1px solid #35584a !important;
  border-radius:20px !important;
  background:linear-gradient(
    155deg,#193330,#132729 80%
  ) !important;
  box-shadow:0 22px 65px rgba(0,0,0,.3) !important;
  color:#eff9f2 !important;
}

body.ws3-login-page .login-card h1,
body.ws3-login-page .login-card h2 {
  color:#f1faf4 !important;
  font-size:27px;
  font-weight:750;
  letter-spacing:-.6px;
  margin:0 0 10px;
}

body.ws3-login-page .login-card .muted {
  color:#abc8b9 !important;
  line-height:1.65;
  font-size:13px;
  margin-bottom:24px;
}

body.ws3-login-page .login-card form {
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
}

body.ws3-login-page .login-card label {
  display:block;
  margin:7px 0 2px;
  color:#d0e8d9 !important;
  font-size:12px;
  font-weight:700;
}

body.ws3-login-page .login-card
input:not([type=hidden]) {
  display:block;
  width:100% !important;
  min-width:0 !important;
  min-height:48px;
  padding:12px 14px !important;
  border:1px solid #486d5b !important;
  border-radius:11px !important;
  background:#0e2123 !important;
  color:#f4fbf6 !important;
  font-size:15px;
}

body.ws3-login-page .login-card
input:focus-visible {
  outline:2px solid #9fe4c5 !important;
  outline-offset:1px;
}

.ws3-password-wrapper {
  position:relative;
  width:100%;
}

body.ws3-login-page .login-card
.ws3-password-wrapper input {
  padding-right:74px !important;
}

body.ws3-login-page .ws3-password-toggle {
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  border:0 !important;
  border-radius:7px !important;
  padding:8px 9px !important;
  background:transparent !important;
  color:#a8d8c2 !important;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

body.ws3-login-page .ws3-password-toggle:hover {
  background:#23443a !important;
}

body.ws3-login-page .login-card
button[type=submit] {
  display:block;
  width:100% !important;
  min-height:49px;
  margin-top:13px;
  padding:12px 17px !important;
  border:1px solid #a6e8cd !important;
  border-radius:11px !important;
  background:#a6e8cd !important;
  color:#112a21 !important;
  font-size:14px;
  font-weight:750;
  cursor:pointer;
}

body.ws3-login-page .login-card
button[type=submit]:hover {
  background:#c2f5dc !important;
}

body.ws3-login-page .login-card a {
  color:#aee9d0 !important;
  text-decoration:none;
  font-weight:650;
}

body.ws3-login-page .login-card a:hover {
  text-decoration:underline;
}

body.ws3-login-page .login-card
:is(.flash,.alert,.error) {
  max-width:100%;
  border-radius:10px;
  overflow-wrap:anywhere;
}

/* Language preference */
.ws3-login-languages {
  display:flex;
  justify-content:center;
  gap:7px;
  margin-top:23px;
}

.ws3-login-languages button {
  padding:8px 15px;
  min-width:82px;
  background:#19312d;
  border:1px solid #36574b;
  border-radius:9px;
  color:#b5d0c1;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
}

.ws3-login-languages button[aria-pressed=true] {
  background:#a6e8cd;
  color:#102720;
  border-color:#a6e8cd;
}

.ws3-login-footer {
  margin-top:19px;
  text-align:center;
  font-size:11px;
  color:#829f91;
}

@media(max-width:600px) {
  body.ws3-login-page .content {
    padding:23px 13px !important;
  }
  body.ws3-login-page .login-card {
    padding:25px 20px !important;
    border-radius:16px !important;
  }
  .ws3-login-brand {
    margin-bottom:22px;
  }
}

@media(max-width:360px) {
  body.ws3-login-page .login-card {
    padding:20px 15px !important;
  }
}