@charset "UTF-8";

#login-page svg.login-logo {
  display: none !important;
}

#login-page > .main-track > main::before {
  content: '';
  display: block;
  flex: none;
  width: 210px;
  height: 30px;
  background-image: url('/brand/logo-light.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

html[data-theme='dark'] #login-page > .main-track > main::before {
  background-image: url('/brand/logo-dark.svg');
}

#app-loader-page > svg.login-logo {
  display: none !important;
}

#app-loader-page::before {
  content: '';
  display: block;
  width: 320px;
  height: 46px;
  background-image: url('/brand/logo-light.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

html[data-theme='dark'] #app-loader-page::before {
  background-image: url('/brand/logo-dark.svg');
}

.navigation > .top > svg {
  display: none !important;
}

.navigation > .top::before {
  content: '';
  display: block;
  flex: none;
  width: 154px;
  height: 22px;
  background-image: url('/brand/logo-light.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

html[data-theme='dark'] .navigation > .top::before {
  background-image: url('/brand/logo-dark.svg');
}

#login-page:has(#login-main-form) h1 {
  font-size: 0 !important;
}

#login-page:has(#login-main-form) h1::after {
  content: 'Welcome to SafeNet';
  font: var(--t-title-h4);
  color: var(--fg-default);
}

#login-page:has(#login-main-form) h2 {
  font-size: 0 !important;
}

#login-page:has(#login-main-form) h2::after {
  content: 'Please enter your credentials to enter your account';
  font: var(--t-body-primary-400);
  color: var(--fg-muted);
}

#login-page > .main-track > main footer p::after {
  content: ' · Operated by Movaci';
  color: var(--fg-muted);
}