html,
body {
   height: 100%;
   margin: 0 auto;
   display: flex;
   align-content: center;
   flex-wrap: wrap;
}

.formLogin, .formEsqueci {
   width: 350px;
}

.formRastreio {
   width: 350px;
}

.campos {
   font-size: 14px!important;
   height: 38px;
}

.form {
   width: 100%;
   min-height: 200px;
   position: relative;
   z-index: 1;
   background: inherit;
   overflow: hidden;
   border-radius: 5px;
   border: 1px solid rgba(255, 255, 255, .2);
   background: rgba(0, 0, 0, .7);
   box-shadow: 0 0 8px 1px rgba(218, 246, 254, 0.1);
   padding: 40px 30px;
}

.logo {
   background: url('../images_system/logoBranco.png') no-repeat center;
   background-size: contain;
   height: 45px;
   margin-bottom: 40px;
}

.form-control{
   /* color: #495057; */
   color: #292929;
   margin-bottom: 20px;
}

.form-control:focus {
   border-color: #00FF00;
   outline: 0;
   box-shadow: none
}

.btn.focus, .btn:focus {
   outline: 0;
   box-shadow:none
}

.toggle-password {
   float: right;
   cursor: pointer;
   margin-right: 10px;
   margin-top: -46px;
}

.rastreamento {
   position: relative;
   width: 100%;
   margin-top: 20px;
}

.app {
   position: relative;
   display: flex;
   align-content: space-between;
   width: 100%;
   margin-top: 20px;
}

.app1 {
   background: url('../images_system/app1.png') no-repeat left;
   background-size: contain;
   height: 40px;
   width: 100%;
}

.app2 {
   background: url('../images_system/app2.png') no-repeat right;
   background-size: contain;
   height: 40px;
   width: 100%;
}

.btn-entrar {
   background: #00FF00;
   color: #000;
   font-weight: 600;
   width: 40%;
}

.btn-entrar:hover {
   color: #111;
   font-weight: 700;
}

.btn-ship {
   background: #CCC;
   color: #000;
   font-weight: 600;
   width: 100%;
   margin-top: 10px;
}

.btn-ship:hover {
   background: #00FF00;
   color: #111;
   font-weight: 700;
}

.esqueci {
   font-size: 14px;
   color: #FFF;
   width: 100%;
   padding-top: 8px;
}

.esqueci:hover {
   color: #00FF00;
   text-decoration: none;
}


.btn-recuperar, .btn-consultar {
   background: #00FF00;
   color: #000;
   font-weight: 600;
   width: 40%;
   float: right;
}

.btn-recuperar:hover, .btn-consultar:hover {
   color: #FFF;
}

.btn-voltar, .btn-limpar {
   background: #CCC;
   color: #000;
   font-weight: 600;
   width: 40%;
}

.btn-voltar:hover, .btn-limpar:hover {
   background: #333;
   color: #FFF;
}

.particle {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 100vh;
   background-color: #171717;
}

.particle::before {
   z-index: -2;
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-image: url('../images_system/tec.jpg');
   background-position: center center;
   background-size: cover;
   opacity: 1;
}