:root {
  color-scheme: light;
  --main-color: #263746;
  --main-bg-color: #f4f7f8;
  --loading-color: #263746;
  --login-color: #475569;
  --login-bg-color: #ffffff;
  --login-border: 1px solid #e8eef0;
  --login-border-radius: 18px;
  --login-box-shadow: 0 24px 70px rgba(38, 55, 70, .12);
  --input-bg-clr: #ffffff;
  --input-border-clr: #dce6e8;
  --input-focus-border-clr: #22949b;
  --input-border-radius: 10px;
  --btn-bg-clr: #22949b;
  --btn-hover-bg-clr: #197b82;
  --btn-color: #ffffff;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body {
  background: #f4f7f8 !important;
  font-family: var(--font);
}

#rl-app {
  background: radial-gradient(circle at 12% 18%, rgba(34, 148, 155, .10), transparent 34%), #f4f7f8 !important;
}

#V-Login {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 1120px;
  min-height: 560px;
  background: #fff;
  border: 1px solid #e8eef0;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(38, 55, 70, .12);
  overflow: hidden;
}

.LoginView .descWrapper {
  grid-column: 1;
  grid-row: 1;
  display: flex !important;
  min-height: 560px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  padding: 56px;
  color: #526575;
  background: linear-gradient(145deg, #f1f5f6, #eaf0f1);
  font-size: 0;
  text-shadow: none;
}

.LoginView .descWrapper::before {
  content: "";
  display: block;
  width: min(310px, 80%);
  height: 96px;
    background: url("/themes/Converxus/converxus-logo.svg") center / contain no-repeat;
}

.LoginView .descWrapper::after {
  content: "Correo empresarial seguro\A Accede a tu correo Converxus desde cualquier lugar";
  white-space: pre;
  color: #526575;
  font-size: 17px;
  line-height: 1.65;
  text-align: center;
  letter-spacing: .01em;
}

.LoginView form {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  min-height: 560px;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 72px 76px 56px;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #263746;
}

.LoginView form::before {
  content: "Ingresa a tu cuenta";
  display: block;
  margin-bottom: 10px;
  color: #263746;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-align: center;
}

.LoginView form::after {
  content: "Usa tu correo corporativo y contraseña de Hostinger";
  display: block;
  order: -1;
  margin-bottom: 28px;
  color: #748493;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.LoginView form * {
  color: #526575;
}

.LoginView .controls {
  margin-bottom: 18px;
}

.LoginView input {
  width: 100%;
  height: 52px;
  padding: 0 16px 0 42px;
  color: #263746;
  font-size: 16px;
  background: #fff;
  border: 1px solid #dce6e8;
  border-radius: 10px;
  box-shadow: none;
}

.LoginView input:focus {
  border-color: #22949b;
  box-shadow: 0 0 0 4px rgba(34, 148, 155, .12);
}

.LoginView .controls > .fontastic:first-child {
  left: 14px;
  color: #22949b;
  line-height: 52px;
}

.LoginView .e-checkbox {
  color: #748493;
}

.LoginView .buttonLogin {
  width: 100%;
  min-height: 52px;
  margin-top: 10px;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  background: #22949b;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(34, 148, 155, .22);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.LoginView .buttonLogin:hover {
  color: #fff !important;
  background: #197b82;
  box-shadow: 0 12px 26px rgba(34, 148, 155, .30);
  transform: translateY(-1px);
}

.LoginView .language-button {
  color: #22949b;
}

@media screen and (max-width: 799px) {
  #V-Login {
    display: block;
    width: calc(100% - 28px);
    min-height: 0;
    max-width: 560px;
  }

  .LoginView .descWrapper {
    min-height: 230px;
    padding: 34px 24px 28px;
  }

  .LoginView .descWrapper::before {
    height: 70px;
  }

  .LoginView .descWrapper::after {
    font-size: 14px;
  }

  .LoginView form {
    min-height: 0;
    padding: 42px 28px 34px;
  }
}