/* ============================================================
   Porto Solar - tema de login (azul e branco)

   Carregado DEPOIS de login_default.css e do CSS de tema do SGP
   (login_neo.css etc). Como esses arquivos usam !important em
   quase tudo, aqui tambem usamos !important para vencer por
   ordem de carregamento. Nenhuma estrutura de formulario e
   alterada por este arquivo.
   ============================================================ */

:root {
  --ps-blue-900: #062A5B;
  --ps-blue-800: #0B3C82;
  --ps-blue-700: #0D47A1;
  --ps-blue-600: #1565C0;
  --ps-blue-500: #1E88E5;
  --ps-blue-300: #64B5F6;
  --ps-blue-050: #EAF2FD;
  --ps-white: #FFFFFF;
  --ps-text: #10243F;
  --ps-muted: #5B7794;
  --ps-danger: #C62828;
}

html,
body {
  width: 100%;
  min-height: 100%;
  background: var(--ps-blue-900) !important;
  color: var(--ps-text) !important;
}

body {
  position: relative;
  overflow-x: hidden;
  background-image:
    radial-gradient(1100px 620px at 12% 8%, rgba(30, 136, 229, .55) 0%, rgba(30, 136, 229, 0) 62%),
    radial-gradient(900px 640px at 88% 92%, rgba(13, 71, 161, .65) 0%, rgba(13, 71, 161, 0) 60%),
    linear-gradient(150deg, #062A5B 0%, #0B3C82 48%, #1565C0 100%) !important;
  background-attachment: fixed !important;
}

/* o tema neo pinta uma imagem laranja fixa sobre o body */
body::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* --- canvas de particulas ------------------------------------------- */
#ps-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* --- layout --------------------------------------------------------- */
.conten-wraper {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.conten-wraper > .container {
  max-width: 480px;
}

.conten-wraper .row.h-100 {
  height: auto !important;
  margin: 0;
  width: 100%;
}

/* coluna original da logo do SGP - nao usada no tema Porto Solar */
#logo {
  display: none !important;
}

#login {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 !important;
  text-align: center !important;
}

/* --- cartao branco -------------------------------------------------- */
#login .form-cont,
.form-cont {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  background: var(--ps-white) !important;
  border-radius: 20px !important;
  padding: 40px 34px 34px !important;
  box-shadow:
    0 24px 60px rgba(3, 20, 48, .38),
    0 2px 0 rgba(255, 255, 255, .6) inset !important;
  text-align: center !important;
  animation: ps-rise .55s cubic-bezier(.22, .68, .28, 1) both;
}

@keyframes ps-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* --- marca ---------------------------------------------------------- */
.ps-brand {
  margin-bottom: 26px;
  user-select: none;
}

.ps-brand__mark {
  width: 62px;
  height: 62px;
  margin: 0 auto 14px;
  display: block;
  max-height: none;
}

.ps-brand__name {
  font-size: 2rem !important;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: .5px;
  margin: 0;
  color: var(--ps-blue-700) !important;
}

.ps-brand__name span {
  font-size: inherit;
  font-weight: 400;
  color: var(--ps-blue-500) !important;
}

.ps-brand__tagline {
  margin-top: 8px;
  font-size: .8rem !important;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ps-muted) !important;
}

.ps-brand__rule {
  width: 56px;
  height: 3px;
  margin: 18px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ps-blue-600), var(--ps-blue-300));
}

/* --- formulario ----------------------------------------------------- */
.form-cont h3 {
  font-size: 1.15rem !important;
  font-weight: 700;
  color: var(--ps-blue-700) !important;
  text-align: center !important;
  margin-bottom: 18px;
}

.form-row {
  max-width: 100% !important;
  margin: 0 !important;
}

.form-row > .col-12,
.form-row > .col-auto {
  padding-left: 0;
  padding-right: 0;
}

.input-group {
  background: var(--ps-blue-050) !important;
  border: 1px solid #D3E2F5 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: hidden;
  margin-bottom: 14px !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}

.input-group:hover {
  background: var(--ps-blue-050) !important;
  border-color: var(--ps-blue-300) !important;
  box-shadow: none !important;
}

.input-group:focus-within,
.input-group.is-focused,
.input-group.is-focused:hover {
  background: var(--ps-white) !important;
  border-color: var(--ps-blue-500) !important;
  box-shadow: 0 0 0 4px rgba(30, 136, 229, .14) !important;
}

.input-group-text {
  background-color: transparent !important;
  border: none !important;
  color: var(--ps-blue-600) !important;
  padding-left: 14px !important;
  padding-right: 6px !important;
}

.input-group-text .oi {
  color: var(--ps-blue-600) !important;
  font-size: 14px;
}

.input-group .form-control {
  background-color: transparent !important;
  border: none !important;
  color: var(--ps-text) !important;
  height: 50px !important;
  font-size: .95rem !important;
  letter-spacing: .2px;
  box-shadow: none !important;
}

.input-group .form-control:focus,
.input-group .form-control:hover {
  color: var(--ps-text) !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.input-group .form-control::placeholder {
  color: #92A9C2 !important;
  opacity: 1 !important;
}

/* autofill do navegador nao pode voltar ao fundo escuro do tema anterior */
.input-group .form-control:-webkit-autofill,
.input-group .form-control:-webkit-autofill:hover,
.input-group .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ps-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--ps-blue-050) inset !important;
  caret-color: var(--ps-text);
}

/* --- botao ---------------------------------------------------------- */
#YD4Yw {
  width: 100% !important;
  max-width: 100%;
  flex: 0 0 100%;
  padding: 0;
}

#entrar {
  width: 100% !important;
  height: 50px !important;
  margin-top: 6px;
  padding: 10px 16px !important;
  border: none !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--ps-blue-600) 0%, var(--ps-blue-500) 100%) !important;
  color: var(--ps-white) !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  letter-spacing: .8px;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(21, 101, 192, .32) !important;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease !important;
}

#entrar:hover,
#entrar:focus {
  background: linear-gradient(135deg, var(--ps-blue-700) 0%, var(--ps-blue-600) 100%) !important;
  border: none !important;
  box-shadow: 0 14px 26px rgba(13, 71, 161, .38) !important;
  transform: translateY(-1px);
}

#entrar:active {
  transform: translateY(0) !important;
  filter: brightness(.96);
  box-shadow: 0 6px 14px rgba(13, 71, 161, .3) !important;
}

#YD4Yw .btn:not(#entrar) {
  width: 100% !important;
  border-radius: 12px !important;
  border: 1px solid #F0C2C2 !important;
  background: #FDECEC !important;
  color: var(--ps-danger) !important;
  box-shadow: none !important;
  margin-top: 10px;
}

#YD4Yw .btn:not(#entrar):hover {
  background: #FBDFDF !important;
  border-color: #E9A9A9 !important;
}

/* --- mensagens ------------------------------------------------------ */
.errornote {
  max-width: 100% !important;
  margin: 0 0 16px !important;
  padding: 11px 14px !important;
  border-radius: 10px !important;
  background: #FDECEC !important;
  border: 1px solid #F5C6C6 !important;
  color: var(--ps-danger) !important;
  font-size: .88rem !important;
  text-align: left;
}

.msg_suspensao {
  max-width: 100% !important;
  margin: 0 0 18px !important;
  padding: 16px !important;
  border-radius: 12px !important;
  background: #FDECEC !important;
  border: 1px solid #F5C6C6 !important;
  color: var(--ps-danger) !important;
  font-size: .9rem !important;
  text-align: left;
}

.msg_suspensao a:link,
.msg_suspensao a:active,
.msg_suspensao a:visited {
  color: var(--ps-blue-700) !important;
  text-decoration: underline;
}

/* --- rodape --------------------------------------------------------- */
.footer {
  position: relative;
  z-index: 1;
  margin: 0 !important;
  flex: 0 0 100%;
  max-width: 100%;
}

.footer p {
  color: rgba(255, 255, 255, .78) !important;
  padding-top: 22px !important;
  margin-bottom: 0;
}

.footer span.small {
  color: rgba(255, 255, 255, .62) !important;
}

.footer .ps-footer-name {
  display: inline-block;
  font-weight: 700;
  letter-spacing: .4px;
  font-size: .95rem !important;
  color: var(--ps-white) !important;
}

#version {
  padding-top: 6px !important;
  color: rgba(255, 255, 255, .55) !important;
  opacity: 1 !important;
}

/* --- responsivo ----------------------------------------------------- */
@media (max-width: 991.98px) {
  #login .form-cont,
  .form-cont {
    padding: 32px 22px 26px !important;
  }
  .form-row {
    max-width: 100% !important;
    margin: 0 !important;
  }
  .errornote,
  .msg_suspensao {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .ps-brand__name {
    font-size: 1.75rem !important;
  }
  .footer p {
    padding-top: 20px !important;
  }
}

@media (max-width: 575.98px) {
  .conten-wraper {
    padding: 20px 12px;
  }
  #login .form-cont,
  .form-cont {
    padding: 28px 18px 22px !important;
  }
  .input-group {
    padding: 0 !important;
  }
}

@media (min-width: 992px) {
  .form-cont {
    text-align: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-cont {
    animation: none;
  }
  #entrar::before {
    display: none;
  }
}