.logo {
  max-width: 336px; }

.background-transtecnia {
  background-color: #00945e;
  color: #fff; }

.custom-icon {
  display: block;
  width: 22px;
  height: 22px;
  margin-left: -5px;
  margin-top: -2px; }

.user-icon {
  background-image: url("../images/icons/user_login.svg"); }

.pass-icon {
  background-image: url("../images/icons/pass_login.svg"); }

.input-login {
  padding-left: 15px 25px !important;
  border-radius: 8px !important;
  background: transparent;
  display: inline-block;
  font-size: 14pt;
  color: black;
  margin-top: 5px;
  height: 48px !important;
  padding-top: 0 !important; }

.input-login::placeholder {
  color: #2c2c2c; }

.input-login:hover {
  color: #2c2c2c; }

.login-form-button {
  width: 100%;
  font-size: 16pt;
  color: white;
  background-color: black;
  border-color: black;
  border-radius: 8px;
  padding: 10px 30px;
  margin-top: 15px; }

.login-form-button > span {
  font-family: 'sf_ui_displayblack' !important; }

.login-form-button:hover {
  background-color: #282828; }

.bg-blue-image {
  background-color: white; }

.bg-white-image-bottom {
  display: none; }

.link-transtecnia {
  position: absolute;
  bottom: 25px;
  width: 100%;
  text-align: center; }

.container-form {
  padding-top: 20%; }

@media only screen and (min-width: 1367px) {
    .container-logo {
        padding-top: 20%;
    }
    .input-login {
        text-align: left;
    }
    .bg-white-image {
        background: 90% 90% / 32% url("../img/brand/login_frase.svg") no-repeat, 0 101% / 48% url("../img/brand/personaje_remuneraciones_digital_completo.png") no-repeat;
        background-color: #00945e;
    }
}

/* TABLET */
@media only screen and (max-width: 992px) {
  .container-logo {
    padding-top: 20%; }
  .input-login {
    text-align: left; }
  .bg-white-image {
    background: 95% 100% / 44% url("../img/brand/login_frase.svg") no-repeat, -4% 101% / 48% url("../img/brand/personaje_remuneraciones_digital_completo.png") no-repeat;
    background-color: #00945e; }
  .logo {
    max-width: 250px; } }

@media only screen and (max-width: 1366px) and (min-width: 1281px) {
  .container-logo {
    padding-top: 20%; }
  .input-login {
    text-align: left; }
  .bg-white-image {
    background: 95% 90% / 44% url("../img/brand/login_frase.svg") no-repeat, -4% 101% / 48% url("../img/brand/personaje_remuneraciones_digital_completo.png") no-repeat;
    background-color: #00945e; }
  .logo {
    max-width: 250px; } }

@media only screen and (max-width: 1280px) and (min-width: 769px) {
  .container-logo {
    padding-top: 20%; }
  .input-login {
    text-align: left; }
  .bg-white-image {
    background: 95% 93% / 35% url("../img/brand/login_frase.svg") no-repeat, -10% 101% / 65% url("../img/brand/personaje_remuneraciones_digital_completo.png") no-repeat;
    background-color: #00945e; }
  .logo {
    max-width: 250px; } }

@media only screen and (orientation: landscape) and (max-width: 812px) {
  .container-logo {
    padding-top: 20%; }
  .bg-white-image {
    background: 68% 100% / 34% url("../img/brand/login_frase.svg") no-repeat, -21% 101% / 50% url("../img/brand/personaje_remuneraciones_digital_completo.png") no-repeat;
    background-color: #00945e; }
  .logo {
    max-width: 250px; }
  .input-login {
    font-size: 11pt;
    text-align: left; }
  .link-transtecnia {
    bottom: 5px; }
  .logo {
    max-width: 200px; }
  .container-form {
    padding-top: 5%; }
  .container-logo {
    padding-top: 6%; }
  .form-item-login {
    margin-bottom: 5px; } }

@media only screen and (orientation: portrait) and (max-width: 768px) {
  .col-md-4 {
    flex: none;
    max-width: none;
    }
   .col-md-12 {
       width: 100% !important
   }
  .container-logo {
    padding-top: 10%; }
  .container-form {
    padding-top: 10%; }
  .bg-white-image {
    display: none; 
}
  .bg-white-image-bottom {
    display: block;
    background: 85% 5% / 40% url("../img/brand/login_frase.svg") no-repeat;
    background-color: #00945e; }
  .logo {
    max-width: 230px; }
  .container {
    max-height: 300px; }
  .img-guy {
    position: absolute;
    bottom: 0%;
    left: calc(-34px);
    height: 115%; }
  .link-transtecnia {
    display: none; }
  .input-login {
    font-size: 10pt;
    text-align: left; }
  .input-group-login {
    max-width: 250px; } }


.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}