/* Hide Login powered by in Login page */
#react-root > main > div > div > div.rcx-css-14gyq0r > div.rcx-box.rcx-box--full.rcx-css-12gps4f {
  display: none;
}
/* Hide Register in Login form */
#react-root > main > div > div > div.rcx-css-1tmhcn7 > form > footer > p {
  display: none;
}
/* Hide Button Change to Default in Login form */
#react-root > main > div > div > div.rcx-css-1tmhcn7 > div > div:last-child {
  display: none !important;
}
/* Hide Powered By in Sidebar */
#sidebar-region > nav > div.rcx-box.rcx-box--full.rcx-sidebar-footer > div {
  display: none;
}
footer.rcx-css-grma {
  padding-block: 0 !important;
}
#react-root > main > div > div > div.rcx-css-14gyq0r > div.rcx-css-1igr1lo {
  padding-block-end: 0 !important;
}
#react-root > main > div > div > div.rcx-css-14gyq0r > div.rcx-css-1igr1lo > div > img.rcx-css-13sr1uc {
  max-height: 8rem !important;
}.sidebar-item--unread {
    background-color: #ffcc00 !important;  /* Màu nền kênh chưa đọc */
    font-weight: bold !important;         /* Làm đậm chữ */
    color: #000 !important;               /* #FF0000 */
}

/*
 * Vimers Chat login refresh for Rocket.Chat.
 *
 * Paste into:
 * Manage -> Workspace -> Settings -> Layout -> Custom CSS
 *
 * Recommended with vimers-rocket-chat-logged-out.js in:
 * Layout -> Custom Scripts -> Custom Script for Logged Out Users
 */

:root {
  --vimers-blue: #2f80ed;
  --vimers-cyan: #56c3f5;
  --vimers-navy: #0f172a;
  --vimers-muted: #64748b;
  --vimers-line: #e2e8f0;
  --vimers-input-line: #d8e3f0;
  --vimers-input-bg: #f8fbff;
}

body.vimers-login {
  margin: 0 !important;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 13% 18%, rgba(86, 195, 245, 0.28) 0, rgba(86, 195, 245, 0) 28vw),
    radial-gradient(circle at 78% 12%, rgba(47, 128, 237, 0.16) 0, rgba(47, 128, 237, 0) 24vw),
    radial-gradient(circle at 86% 82%, rgba(86, 195, 245, 0.2) 0, rgba(86, 195, 245, 0) 26vw),
    linear-gradient(135deg, #f5fbff 0%, #eaf4ff 46%, #ffffff 100%) !important;
  color: var(--vimers-navy);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.vimers-login #react-root,
body.vimers-login #react-root > main {
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 13% 18%, rgba(86, 195, 245, 0.28) 0, rgba(86, 195, 245, 0) 28vw),
    radial-gradient(circle at 78% 12%, rgba(47, 128, 237, 0.16) 0, rgba(47, 128, 237, 0) 24vw),
    radial-gradient(circle at 86% 82%, rgba(86, 195, 245, 0.2) 0, rgba(86, 195, 245, 0) 26vw),
    linear-gradient(135deg, #f5fbff 0%, #eaf4ff 46%, #ffffff 100%) !important;
  color: var(--vimers-navy) !important;
}

body.vimers-login #react-root > main > div:not(.vimers-login-stage):not(.vimers-login-card),
body.vimers-login #react-root > main > div > div:not(.vimers-login-stage):not(.vimers-login-card),
body.vimers-login #react-root > main > div > div > div:not(.vimers-login-stage):not(.vimers-login-card):not(.vimers-local-login-panel) {
  background-color: transparent !important;
  background-image: none !important;
}

body.vimers-login #react-root > main > svg,
body.vimers-login #react-root > main > div > svg,
body.vimers-login #react-root > main > div > div > svg {
  display: none !important;
}

body.vimers-login::before,
body.vimers-login::after {
  position: fixed;
  z-index: 0;
  width: 360px;
  height: 360px;
  pointer-events: none;
  content: "";
  border-radius: 999px;
  filter: blur(52px);
}

body.vimers-login::before {
  top: 6%;
  left: -120px;
  background: rgba(86, 195, 245, 0.3);
}

body.vimers-login::after {
  right: -120px;
  bottom: 4%;
  background: rgba(47, 128, 237, 0.18);
}

body.vimers-login #react-root,
body.vimers-login .vimers-login-stage {
  position: relative;
  z-index: 1;
}

body.vimers-login .vimers-login-stage {
  display: grid !important;
  box-sizing: border-box;
  width: min(100%, 1180px) !important;
  min-height: calc(100vh - 48px) !important;
  margin: 0 auto !important;
  padding: 30px 48px 42px !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 468px);
  gap: clamp(48px, 7vw, 92px);
  align-items: center;
  transform: translateY(-28px);
}

body.vimers-login .vimers-login-brand {
  max-width: 560px;
  color: var(--vimers-navy);
  transform: translateY(-78px);
}

body.vimers-login .vimers-login-brand__mark {
  display: inline-flex;
  margin-bottom: 36px;
  align-items: center;
  gap: 12px;
  min-height: 56px;
}

body.vimers-login .vimers-login-brand__icon {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, #56c3f5 0%, #2f80ed 100%) !important;
  box-shadow: 0 12px 26px rgba(47, 128, 237, 0.16);
}

body.vimers-login .vimers-login-brand__icon::before {
  position: absolute;
  top: 14px;
  left: 10px;
  width: 28px;
  height: 18px;
  content: "";
  border-radius: 999px;
  background: #ffffff;
}

body.vimers-login .vimers-login-brand__icon::after {
  position: absolute;
  top: 21px;
  left: 17px;
  width: 4px;
  height: 4px;
  content: "";
  border-radius: 999px;
  background: #2f80ed;
  box-shadow: 7px 0 0 #2f80ed, 14px 0 0 #2f80ed, -3px 8px 0 1px #ffffff;
}

body.vimers-login .vimers-login-brand__logo-img {
  display: none;
  width: min(230px, 100%);
  max-width: 230px;
  max-height: 72px;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: left center;
}

body.vimers-login .vimers-login-brand--asset-loaded .vimers-login-brand__logo-img {
  display: block;
}

body.vimers-login .vimers-login-brand--asset-loaded .vimers-login-brand__icon {
  display: none;
}

body.vimers-login .vimers-login-brand--asset-horizontal .vimers-login-brand__name {
  display: none;
}

body.vimers-login .vimers-login-brand--asset-icon .vimers-login-brand__logo-img {
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  border-radius: 14px;
  object-position: center;
  filter: drop-shadow(0 12px 18px rgba(47, 128, 237, 0.16));
}

body.vimers-login .vimers-login-brand__name {
  color: #139cf6;
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

body.vimers-login .vimers-login-brand__title {
  max-width: 560px;
  margin: 0 0 16px;
  color: var(--vimers-navy);
  font-size: clamp(42px, 4.3vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
}

body.vimers-login .vimers-login-brand__subtitle {
  max-width: 520px;
  margin: 0;
  color: var(--vimers-muted);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
}

body.vimers-login .vimers-login-stage > *:not(.vimers-login-brand):not(.vimers-login-card) {
  display: none !important;
}

body.vimers-login .vimers-login-card {
  display: flex !important;
  box-sizing: border-box;
  width: min(100%, 468px) !important;
  max-width: 468px !important;
  margin: 0 auto !important;
  padding: 36px 38px !important;
  flex-direction: column !important;
  gap: 0 !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.1) !important;
  color: var(--vimers-navy) !important;
  backdrop-filter: blur(18px);
}

body.vimers-login .vimers-login-card *,
body.vimers-login .vimers-local-login-panel * {
  letter-spacing: 0 !important;
}

body.vimers-login .vimers-login-card-copy {
  order: 0;
  margin-bottom: 6px;
}

body.vimers-login .vimers-login-card-copy h1 {
  margin: 0 0 8px;
  color: var(--vimers-navy);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

body.vimers-login .vimers-login-card-copy p {
  margin: 0;
  color: var(--vimers-muted);
  font-size: 15px;
  line-height: 1.55;
}

body.vimers-login .vimers-login-card img[src*="/assets/logo"],
body.vimers-login .vimers-login-card [class*="logo" i] img,
body.vimers-login .vimers-login-card > img,
body.vimers-login .vimers-login-card > picture,
body.vimers-login .vimers-login-card > h1,
body.vimers-login .vimers-login-card > h2,
body.vimers-login .vimers-login-card > div:has(> img):not(.vimers-login-card-copy):not(.vimers-sso-group),
body.vimers-login .vimers-login-card > div:has(> h1):not(.vimers-login-card-copy):not(.vimers-sso-group),
body.vimers-login .vimers-login-card > div:has(> h2):not(.vimers-login-card-copy):not(.vimers-sso-group) {
  display: none !important;
  max-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.vimers-login .vimers-sso-group {
  display: flex !important;
  width: 100% !important;
  margin: 0 !important;
  order: 3;
  flex-direction: column !important;
  gap: 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

/*
 * Defensive stacking: ensure the SSO button always receives its own clicks even
 * if some other control (e.g. the password reveal overlay) renders on top of it.
 */
body.vimers-login .vimers-sso-cta,
body.vimers-login .vimers-sso-primary {
  position: relative !important;
  z-index: 3 !important;
}

/* Clip anything inside the password field so it can never bleed over the card. */
body.vimers-login .vimers-password-holder,
body.vimers-login .vimers-input-holder {
  position: relative !important;
  overflow: hidden !important;
}

body.vimers-login .vimers-sso-cta,
body.vimers-login .vimers-login-card a[href*="oauth" i],
body.vimers-login .vimers-login-card button[class*="oauth" i],
body.vimers-login .vimers-login-card button[class*="sso" i],
body.vimers-login .vimers-login-card a[class*="sso" i] {
  display: inline-flex !important;
  box-sizing: border-box;
  width: 100% !important;
  min-height: 50px !important;
  padding: 0 18px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border: 1px solid #7ab7ff !important;
  border-radius: 16px !important;
  background: #f0f7ff !important;
  box-shadow: none !important;
  color: #1d6fea !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease !important;
}

body.vimers-login .vimers-sso-cta::before {
  display: none;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  content: "";
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M12%202.25l7.25%203.1v5.45c0%204.58-2.93%208.9-7.25%2010.95C7.68%2019.7%204.75%2015.38%204.75%2010.8V5.35L12%202.25zm0%202.18L6.75%206.67v4.13c0%203.6%202.08%207%205.25%208.66%203.17-1.66%205.25-5.06%205.25-8.66V6.67L12%204.43zm3.53%205.6l-4.24%204.25-2.12-2.12%201.41-1.41.71.7%202.83-2.83%201.41%201.41z%27/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M12%202.25l7.25%203.1v5.45c0%204.58-2.93%208.9-7.25%2010.95C7.68%2019.7%204.75%2015.38%204.75%2010.8V5.35L12%202.25zm0%202.18L6.75%206.67v4.13c0%203.6%202.08%207%205.25%208.66%203.17-1.66%205.25-5.06%205.25-8.66V6.67L12%204.43zm3.53%205.6l-4.24%204.25-2.12-2.12%201.41-1.41.71.7%202.83-2.83%201.41%201.41z%27/%3E%3C/svg%3E") center / contain no-repeat;
}

body.vimers-login .vimers-sso-cta:hover,
body.vimers-login .vimers-login-card a[href*="oauth" i]:hover,
body.vimers-login .vimers-login-card button[class*="oauth" i]:hover,
body.vimers-login .vimers-login-card button[class*="sso" i]:hover {
  border-color: var(--vimers-blue) !important;
  background: #e4f1ff !important;
  box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.08) !important;
  filter: none !important;
}

body.vimers-login .vimers-sso-cta:active,
body.vimers-login .vimers-login-card a[href*="oauth" i]:active,
body.vimers-login .vimers-login-card button[class*="oauth" i]:active,
body.vimers-login .vimers-login-card button[class*="sso" i]:active {
  transform: translateY(0) !important;
}

body.vimers-login .vimers-sso-cta:focus,
body.vimers-login .vimers-sso-cta:focus-visible,
body.vimers-login .vimers-login-card a[href*="oauth" i]:focus,
body.vimers-login .vimers-login-card a[href*="oauth" i]:focus-visible,
body.vimers-login .vimers-login-card button[class*="oauth" i]:focus,
body.vimers-login .vimers-login-card button[class*="oauth" i]:focus-visible,
body.vimers-login .vimers-login-card button[class*="sso" i]:focus,
body.vimers-login .vimers-login-card button[class*="sso" i]:focus-visible {
  outline: none !important;
  transform: none !important;
  border-color: var(--vimers-blue) !important;
  background: #e4f1ff !important;
  box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.1) !important;
}

body.vimers-login .vimers-sso-duplicate {
  display: none !important;
}

body.vimers-login .vimers-local-login-panel .vimers-sso-cta,
body.vimers-login .vimers-local-login-panel a[href*="oauth" i],
body.vimers-login .vimers-local-login-panel button[class*="oauth" i],
body.vimers-login .vimers-local-login-panel button[class*="sso" i],
body.vimers-login .vimers-local-login-form .vimers-sso-cta,
body.vimers-login .vimers-local-login-form a[href*="oauth" i],
body.vimers-login .vimers-local-login-form button[class*="oauth" i],
body.vimers-login .vimers-local-login-form button[class*="sso" i] {
  display: none !important;
}

body.vimers-login .vimers-sso-group .vimers-sso-primary,
body.vimers-login .vimers-login-card > .vimers-sso-primary {
  display: inline-flex !important;
}

body.vimers-login .vimers-login-separator {
  display: flex !important;
  width: 100% !important;
  margin: 24px 0 21px !important;
  order: 2;
  align-items: center !important;
  gap: 12px !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

body.vimers-login .vimers-login-separator::before,
body.vimers-login .vimers-login-separator::after {
  height: 1px;
  min-width: 24px;
  flex: 1;
  content: "";
  background: var(--vimers-line);
  opacity: 0.75;
}

body.vimers-login .vimers-local-login-form,
body.vimers-login .vimers-login-card form {
  display: flex !important;
  width: 100% !important;
  margin: 0 !important;
  order: 1;
  flex-direction: column !important;
  gap: 15px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--vimers-navy) !important;
}

body.vimers-login .vimers-local-login-panel {
  display: flex !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 1;
  flex-direction: column !important;
  gap: 15px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--vimers-navy) !important;
}

body.vimers-login #react-root .vimers-login-card .vimers-local-login-panel {
  display: flex !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--vimers-navy) !important;
}

body.vimers-login .vimers-local-login-panel > div,
body.vimers-login .vimers-local-login-panel > section,
body.vimers-login .vimers-local-login-panel > article {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--vimers-navy) !important;
}

body.vimers-login .vimers-local-login-form > div:not(.vimers-input-holder):not(.vimers-local-submit-row),
body.vimers-login .vimers-local-login-form > label,
body.vimers-login .vimers-local-login-panel form > div:not(.vimers-input-holder):not(.vimers-local-submit-row) {
  display: block !important;
}

body.vimers-login .vimers-local-login-panel :is(div, section, article, fieldset):not(.vimers-input-holder):not(.vimers-local-submit-row) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.vimers-login .vimers-local-old-heading,
body.vimers-login .vimers-login-old-separator:not(.vimers-login-separator),
body.vimers-login .vimers-login-noise {
  display: none !important;
}

body.vimers-login #react-root .vimers-login-old-separator:not(.vimers-login-separator) {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  opacity: 0 !important;
}

body.vimers-login .vimers-login-card label {
  margin-bottom: 6px !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

body.vimers-login .vimers-login-card input:is([type="text"], [type="email"], [type="password"]) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 0 15px !important;
  border: 1px solid var(--vimers-input-line) !important;
  border-radius: 14px !important;
  outline: none !important;
  background: var(--vimers-input-bg) !important;
  box-shadow: none !important;
  color: var(--vimers-navy) !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease !important;
}

body.vimers-login .vimers-login-card input:is([type="text"], [type="email"], [type="password"])::placeholder {
  color: #94a3b8 !important;
}

body.vimers-login .vimers-login-card input:is([type="text"], [type="email"], [type="password"]):focus,
body.vimers-login .vimers-login-card input:is([type="text"], [type="email"], [type="password"]):focus-visible {
  border-color: var(--vimers-blue) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.13) !important;
}

body.vimers-login .vimers-input-holder {
  display: flex !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 0 !important;
  align-items: center !important;
  border: 1px solid var(--vimers-input-line) !important;
  border-radius: 14px !important;
  background: var(--vimers-input-bg) !important;
  box-shadow: none !important;
  color: var(--vimers-navy) !important;
  overflow: hidden !important;
}

body.vimers-login .vimers-input-holder:focus-within {
  border-color: var(--vimers-blue) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.13) !important;
}

body.vimers-login .vimers-input-holder input:is([type="text"], [type="email"], [type="password"]) {
  min-height: 50px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: 1 1 auto !important;
}

/*
 * Validation error state. Rocket.Chat marks an invalid field with
 * aria-invalid="true" on the <input> and an `invalid` class on the input
 * wrapper, and renders the message in a <span class="rcx-field__error">.
 * These rules sit after the normal/blue focus rules so red wins, and the
 * placeholder colour is intentionally left untouched (stays grey).
 */
body.vimers-login .vimers-login-card .rcx-field__error {
  margin-top: 6px !important;
  color: #dc2626 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

/* Bare inputs (no pill wrapper) */
body.vimers-login .vimers-login-card input[aria-invalid="true"]:is([type="text"], [type="email"], [type="password"]) {
  border-color: #ef4444 !important;
}

body.vimers-login .vimers-login-card input[aria-invalid="true"]:is([type="text"], [type="email"], [type="password"]):focus,
body.vimers-login .vimers-login-card input[aria-invalid="true"]:is([type="text"], [type="email"], [type="password"]):focus-visible {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14) !important;
}

/* Inputs inside the pill wrapper: colour the wrapper instead of the input */
body.vimers-login .vimers-input-holder:has(input[aria-invalid="true"]),
body.vimers-login .vimers-login-card .rcx-input-box__wrapper.invalid {
  border-color: #ef4444 !important;
}

body.vimers-login .vimers-input-holder:has(input[aria-invalid="true"]):focus-within,
body.vimers-login .vimers-login-card .rcx-input-box__wrapper.invalid:focus-within {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14) !important;
}

/*
 * Show/hide password (eye) control. The SSO click bug was caused by a DOM-thrash
 * loop in the logged-out script, not by this icon, so it is kept visible. These
 * rules just make Rocket.Chat's native eye control sit cleanly inside the styled
 * input pill.
 */
body.vimers-login .vimers-password-holder .rcx-input-box__addon {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 2px !important;
  padding: 0 4px !important;
  background: transparent !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

body.vimers-login .vimers-password-holder .rcx-input-box__addon:hover {
  color: var(--vimers-blue) !important;
}

body.vimers-login .vimers-password-holder input[type="password"] {
  padding-right: 6px !important;
}

body.vimers-login #react-root .vimers-login-card .vimers-local-login-panel .vimers-local-submit-row {
  display: flex !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.vimers-login .vimers-local-submit,
body.vimers-login .vimers-login-card form button[type="submit"] {
  display: inline-flex !important;
  width: 100% !important;
  min-height: 52px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(90deg, #56c3f5 0%, #2f80ed 100%) !important;
  box-shadow: 0 10px 24px rgba(47, 128, 237, 0.2) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease !important;
}

body.vimers-login .vimers-local-submit:hover,
body.vimers-login .vimers-login-card form button[type="submit"]:hover {
  background: linear-gradient(90deg, #4bbcf1 0%, #2478e6 100%) !important;
  box-shadow: 0 12px 26px rgba(47, 128, 237, 0.24) !important;
  transform: translateY(-1px) !important;
}

body.vimers-login .vimers-local-submit:active,
body.vimers-login .vimers-login-card form button[type="submit"]:active {
  transform: translateY(0) !important;
  box-shadow: 0 8px 18px rgba(47, 128, 237, 0.2) !important;
}

body.vimers-login .vimers-login-card a {
  color: var(--vimers-blue) !important;
  font-weight: 600;
  text-decoration: none;
}

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

body.vimers-login .vimers-login-card :is(p, small, span) {
  color: inherit;
}

body.vimers-login .vimers-login-card :is([href*="terms" i], [href*="privacy" i], [href*="legal" i]) {
  color: var(--vimers-blue) !important;
}

body.vimers-login .vimers-login-footer,
body.vimers-login .vimers-login-card footer,
body.vimers-login .vimers-login-card > p:has(a[href*="terms" i]),
body.vimers-login .vimers-login-card > p:has(a[href*="privacy" i]),
body.vimers-login .vimers-login-card > p:has(a[href*="legal" i]) {
  width: 100% !important;
  margin: 16px 0 0 !important;
  order: 4 !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

body.vimers-login .vimers-login-footer a,
body.vimers-login .vimers-login-card footer a {
  color: var(--vimers-blue) !important;
  font-weight: 700 !important;
}

body.vimers-login .vimers-login-card :is([class*="powered" i], [data-qa-id*="powered" i]) {
  display: none !important;
}

@media (max-width: 900px) {
  body.vimers-login .vimers-login-stage {
    width: min(100%, 480px) !important;
    min-height: 100svh !important;
    padding: 24px !important;
    grid-template-columns: 1fr;
    gap: 18px;
    justify-items: center;
    transform: none;
  }

  body.vimers-login .vimers-login-brand {
    max-width: 420px;
    transform: none;
    text-align: center;
  }

  body.vimers-login .vimers-login-brand__mark {
    margin: 0 auto 4px;
    justify-content: center;
  }

  body.vimers-login .vimers-login-brand__logo-img {
    width: min(180px, 100%);
    max-width: 180px;
    max-height: 58px;
    object-position: center;
  }

  body.vimers-login .vimers-login-brand--asset-icon .vimers-login-brand__logo-img {
    width: 42px;
    height: 42px;
    max-width: 42px;
    max-height: 42px;
  }

  body.vimers-login .vimers-login-brand__icon {
    width: 42px;
    height: 42px;
    background-size: 36px 36px;
  }

  body.vimers-login .vimers-login-brand__name {
    font-size: 22px;
  }

  body.vimers-login .vimers-login-brand__title,
  body.vimers-login .vimers-login-brand__subtitle {
    display: none;
  }

  body.vimers-login .vimers-login-brand__title {
    margin-bottom: 8px;
    font-size: 30px;
    line-height: 1.2;
  }

  body.vimers-login .vimers-login-brand__subtitle {
    font-size: 15px;
    line-height: 1.5;
  }

  body.vimers-login .vimers-login-card {
    width: 100% !important;
    max-width: 420px !important;
    padding: 24px !important;
    border-radius: 22px !important;
  }

  body.vimers-login .vimers-login-card-copy h1 {
    font-size: 26px;
  }
}

@media (max-width: 390px) {
  body.vimers-login .vimers-login-stage {
    padding: 20px 16px !important;
  }

  body.vimers-login .vimers-login-brand__title {
    font-size: 27px;
  }

  body.vimers-login .vimers-login-brand__subtitle {
    display: none;
  }

  body.vimers-login .vimers-login-card {
    padding: 20px !important;
  }

  body.vimers-login .vimers-login-card input:is([type="text"], [type="email"], [type="password"]),
  body.vimers-login .vimers-sso-cta,
  body.vimers-login .vimers-login-card form button[type="submit"] {
    min-height: 48px !important;
  }
}