.login-container{
  font-family:Roboto, sans-serif;
  width:100vw;
  height:100vh;
  min-width:100vw;
  min-height:100vh;
  overflow:hidden;
  background:#003056;
  background:linear-gradient(90deg, #003056 0%, #005378 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003056",endColorstr="#005378",GradientType=1);
  display:block;
}
.login-container-background{
  width:100%;
  height:100%;
  background-image:url("/images/common/login-background.svg");
  background-size:50%;
  animation:background-animation 120s infinite linear;
}
.login-content{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
}
.login-box{
  flex-grow:1;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.login-box-external{
  width:900px;
  height:550px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.login-box-external-characters{
  animation:zoomIn 0.2s 1 ease-out;
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:480px;
  background-image:url("/images/common/login-characters.svg");
  background-repeat:no-repeat;
  filter:drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.4));
  background-position:center;
}
.login-box-internal{
  width:800px;
  height:470px;
  box-shadow:0 0 60px 7px #001d3afa;
  border-radius:8px;
  overflow:hidden;
  display:flex;
  background:#00a499;
  background:linear-gradient(143deg, #00a499 0%, #005378 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00a499",endColorstr="#005378",GradientType=1);
}
.login-box-internal-left{
  width:400px;
  height:470px;
  background-image:url("/images/common/login-internal-background.svg");
  background-size:50%;
}
.login-box-internal-right{
  width:400px;
  height:470px;
  background-color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.login-box-internal-right .logon{
  width:75%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
}
.login-box-internal-right .logon-logo{
  width:140px;
  margin-top:20px;
}
.login-box-internal-right .logon-logo img{
  animation:flipInX 1s 1 ease-out;
}
.login-box-internal-right .logon-form{
  width:100%;
  margin-bottom:25px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-direction:column;
  flex-grow:1;
}
.login-box-internal-right .logon-form-title{
  font-family:"Patua One", sans-serif;
  text-align:center;
  color:#004186;
  font-size:1.5rem;
  padding-top:1rem;
}
.login-box-internal-right .logon-form form{
  width:100%;
  flex-grow:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
}
.login-box-internal-right .logon-form form .input::-moz-placeholder{
  color:#414141;
}
.login-box-internal-right .logon-form form .input::placeholder{
  color:#414141;
}
.login-box-internal-right .logon-form form .input.newpass{
  margin-top:10px;
  margin-bottom:10px;
}
.login-box-internal-right .logon-form form input[type=checkbox]{
  accent-color:#00A499;
}
.login-box-internal-right .logon-form form .checkbox a{
  color:#00a9f1;
  text-decoration:underline;
}
.login-box-internal-right .logon-form form .checkbox a:hover{
  color:#000;
}
.login-box-internal-right .logon-form form .select{
  font-size:1rem;
}
.login-box-internal-right .logon-form-content{
  width:100%;
}
.login-box-internal-right .logon-form-notification{
  padding:10px;
  border-radius:5px;
  font-size:0.9rem;
  background-color:#7cf9f9;
  color:#006f72;
  text-align:center;
  font-weight:600;
  margin-top:0.9rem;
}
.login-box-internal-right .logon-form-notification span{
  color:#3e3e3e;
  display:block;
}
.login-box-internal-right .logon-form-newpass{
  margin:0.9rem 0;
  text-align:justify;
}
.login-box-internal-right .logon-form-label{
  font-weight:bold;
  color:#626262;
  font-size:0.8rem;
  margin-bottom:5px;
  margin-top:5px;
  display:block;
}
.login-box-internal-right .logon-form-forget{
  text-align:right;
  font-size:0.9rem;
  color:#00a9f1;
  display:block;
  width:100%;
  padding-top:5px;
}
.login-box-internal-right .logon-form-forget:hover{
  text-decoration:underline;
  color:#000;
}
.login-box-internal-right .logon-form-error{
  border-radius:5px;
  background-color:#db3d6f;
  padding:7px 5px;
  color:#fff;
  text-transform:uppercase;
  text-align:center;
  font-weight:500;
  font-size:0.8rem;
  margin-top:10px;
  animation:flash 0.3s 1 linear;
}
.login-box-internal-right .logon-form-buttons{
  display:flex;
  width:100%;
}
.login-box-internal-right .logon-form-button{
  background:#00a499;
  background:linear-gradient(90deg, #00a499 0%, #93c90f 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00a499",endColorstr="#93c90f",GradientType=1);
  display:block;
  padding:10px;
  color:#ffffff;
  border-radius:5px;
  width:100%;
  font-weight:600;
  margin-top:10px;
  font-size:1.3rem;
  text-align:center;
  border:2px solid #fff;
  box-shadow:0px 5px 7px rgba(0, 0, 0, 0.2);
}
.login-box-internal-right .logon-form-button.back{
  background:#ccc;
  color:#000;
  border:0;
  box-shadow:none;
  font-weight:500;
  margin-right:1rem;
}
.login-box-internal-right .logon-form-button:hover{
  cursor:pointer;
  background:#0072a3;
  background:linear-gradient(328deg, #0072a3 0%, #003056 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0072a3",endColorstr="#003056",GradientType=1);
  color:#fff;
}
.login-box-internal-right .logon-form-button:hover.back{
  background:#868686;
}
.login-box-internal-right .logon-form-button.is-loading{
  color:transparent !important;
  pointer-events:none;
  opacity:0.5;
  position:relative;
}
.login-box-internal-right .logon-form-button.is-loading::after{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  border:4px solid transparent;
  border-top-color:#ffffff;
  border-radius:50%;
  animation:button-loading-spinner 1s ease infinite;
}
.login-box-internal-right .logon .pinbox-success{
  margin-top:0.3rem;
  background-color:#bdf53f;
  padding:0.7rem;
  text-align:center;
  font-weight:600;
  font-size:1.1rem;
  border-radius:5px;
  color:#474e12;
  animation:flash 1s 1 ease-out;
}
.login-box-internal-right .logon .pinbox-text{
  text-align:center;
  padding-top:0.8rem;
}
.login-box-internal-right .logon .pinbox-text.alerta{
  padding-bottom:1rem;
}
.login-box-internal-right .logon .pinbox-email{
  padding-bottom:1rem;
  text-align:center;
  font-weight:600;
  font-size:1.2rem;
  color:#005896;
}
.login-box-internal-right .logon .pinbox-sms{
  width:100%;
  display:flex;
  justify-content:space-between;
}
.login-footer{
  width:100%;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.login-footer-content{
  font-size:0.9rem;
  color:aliceblue;
  letter-spacing:0.02rem;
  font-weight:500;
}
.login-footer-content strong{
  color:#90c811;
}

@keyframes background-animation{
  0%{
    background-position:0%;
  }
  50%{
    background-position:100%;
  }
  100%{
    background-position:0%;
  }
}
@media screen and (max-width: 1024px){
  .login-box-external{
    width:450px;
    height:auto;
  }
  .login-box-external-characters{
    display:none;
  }
  .login-box-internal{
    height:auto;
  }
  .login-box-internal-left{
    display:none;
  }
  .login-box-internal-right{
    width:100%;
    height:auto;
  }
  .login-box-internal-right .logon{
    width:85%;
  }
}
@media screen and (max-width: 510px){
  .login-box-external{
    width:85%;
  }
  .login-box-internal-right .logon{
    width:90%;
  }
  .login-box-internal-right .logon-form-title{
    font-size:1.8rem;
  }
  .login-box-internal-right .logon-form-label{
    font-size:1.1rem;
  }
  .login-box-internal-right .logon-form form .select{
    font-size:1.5rem;
  }
  .login-box-internal-right .logon-form form .control{
    font-size:1.5rem;
  }
  .login-box-internal-right .logon-form form .input{
    font-size:1.5rem;
  }
  .login-box-internal-right .logon-form-forget{
    font-size:1.2rem;
  }
}
@keyframes button-loading-spinner{
  from{
    transform:rotate(0turn);
  }
  to{
    transform:rotate(1turn);
  }
}