/* Tema DLL para a tela de login do MapOS: mesmo visual do portal de backup.
   Carregado depois do matrix-login.css; nao altera a estrutura da pagina. */

body {
  font-family: "Segoe UI", "Roboto", Arial, sans-serif;
}

/* Fundo e disposicao: saudacao em cima, cartao centralizado */
.main-login {
  flex-direction : column;
  justify-content: center;
  height         : auto;
  min-height     : 100vh;
  padding        : 24px 16px;
  background     : linear-gradient(135deg, #0b2239 0%, #0b3d6b 55%, #0087ca 100%) fixed;
}

.left-login {
  width        : auto;
  height       : auto;
  margin-bottom: 22px;
  text-align   : center;
}

.left-login > h1 {
  margin     : 0;
  line-height: 1.2;
  color      : #ffffff;
}

.left-login > h2 {
  margin     : 6px 0 0;
  line-height: 1.3;
  color      : #c9dcee;
}

.left-login-image {
  display: none;
}

.right-login {
  width : auto;
  height: auto;
}

.container {
  width: auto;
}

/* Cartao branco com o logo no topo */
.container .card {
  width        : 420px;
  max-width    : calc(100vw - 32px);
  background   : #ffffff;
  border-radius: 14px;
  box-shadow   : 0 18px 50px rgba(0, 0, 0, 0.35);
}

.container .card .content {
  padding: 26px 34px 22px;
}

.container .card .content::before {
  content      : "";
  display      : block;
  height       : 110px;
  margin-bottom: 22px;
  background   : url(../img/logo-dll-informatica.png) center / contain no-repeat;
}

/* O logo ja traz o nome; titulo e versao ficam ocultos */
#newlog,
#mcell {
  display: none;
}

/* Campos */
.input-field {
  position     : relative;
  margin-bottom: 12px;
}

.input-field label {
  margin : 0;
  padding: 14px 13px;
  color  : #0087ca;
}

.container .card .content input[type="text"],
.container .card .content input[type="password"] {
  width        : 100%;
  height       : 42px;
  margin       : 0;
  padding      : 6px 12px 6px 38px;
  background   : #ffffff;
  border       : 1px solid #cfd8e3;
  border-radius: 6px;
  box-shadow   : none;
  color        : #211915;
  font-size    : 14px;
}

.container .card .content input:focus {
  border    : 1px solid #0087ca;
  box-shadow: 0 0 0 3px rgba(0, 135, 202, 0.2);
}

.help-block,
.help-inline,
.control-group.success .help-inline {
  padding-top: 4px;
  color      : #c0392b;
}

/* Botao */
.container .card .content button {
  margin        : 8px 0 12px;
  padding       : 11px 15px;
  background    : #0087ca;
  border-radius : 6px;
  color         : #ffffff;
  font-size     : 15px;
  font-weight   : 600;
  text-transform: none;
}

.container .card .content button:hover {
  background : #006fa6;
  box-shadow : none;
  color      : #ffffff;
  font-weight: 600;
}

.container .card .content div a {
  color: #7a8794;
}

.container .card .content div a:hover {
  color: #0b2239;
}

@media (max-width: 800px) {
  .left-login {
    display: none;
  }

  .container .card .content {
    padding: 20px 22px 18px;
  }
}