body {
    margin: 0;
    padding: 0;
    background: #fff;
    color: #555;
    font-family: SourceSansProRegular, Arial, sans-serif;
    font-size: 12px;
}

.body {
    position: fixed;
    z-index: 0;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-size: cover;
    display: none;
}

.grad {
    position: fixed;
    z-index: 1;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: #1E90FF;
    opacity: 0.7;
}

.auth-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

.form-container {
    background-color: #ffffff;
    border-radius: 0 0 2px 2px;
    box-shadow: 0 0 6px #bbb;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 250px;
    padding: 6px 0 10px;
    width: 450px;
}

.logo-container {
    align-items: center;
    display: flex;
    height: 70px;
    justify-content: center;
    padding: 0 20px 10px;
    width: calc(100% - 40px);
}

.logo-container .img-logo {
    max-height: 100%;
    max-width: 100%;
}

.text-container {
	padding: 10px 20px 0;
	max-width: calc( 100% - 40px);
}

.fields-container {
    background-color: #ededed;
    border-color: #e8e8e8;
    border-style: solid;
    border-width: 2px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px 20px;
}

.fields-container .inputlogin {
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    color: #555;
    height: 25px;
    margin-bottom: 15px;
    padding: 2px 8px;
}

.fields-container .checkremenberlogin {
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    margin: 0;
}

.fields-container .remember-container {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.fields-container .remember-container .check-remember {
	align-items: center;
    display: flex;
}

.fields-container .link {
	color: #4aa595;
	font-size: 9pt;
}
.fields-container .link:visited {
	color: #4aa595;
}
.fields-container .link:hover {
	color: #3c897b;
}

.fields-container .container-btn-login .Button {
    align-self: right;
   	border: 1px solid #308734;
    border-radius: 4px;
    color: #f8f8f8;
    cursor: pointer;
    float: right;
    height: 30px;
    width: 100px;
    background-color: #007905;
}
.fields-container .container-btn-login .Button:hover {
	background-color: #008904;
}

.fields-container .Error {
    border: 1px solid #d15151;
    color: #ee0000;
    font-size: 12px;
    margin-bottom: 10px;
    padding: 5px 0;
    text-align: center;
    width: 100%;
}

.inputlogin.input-error {
    border-color: #ee0000 !important;
}

.fields-container .links-container {
    align-items: center;
    display: flex;
    height: 12px;
    justify-content: space-between;
}

.fields-container .links-container label {
	color: #4aa595;
}

/*
* Change color placeholder
*/
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   	color: #999;
   	opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #999;
	opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #999!important;
}
::-ms-input-placeholder { /* Microsoft Edge */
	color: #999!important;
}


/*
* Loading
*/
.preloader {
    background-color: #ffffff;
    border-radius: 2px 2px 0 0;
    height: 4px;
    overflow: hidden;
    position: relative;
    top: 1px;
    width: 450px; 
}
	
.loader {
  height: 4px !important;
}
.loader:before{
  display: block;
  position: absolute;
  content: "";
  left: -200px;
  width: 200px;
  height: 4px;
  background-color: #37993a;
  animation: loading 2s linear infinite;
}

@keyframes loading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
}

/* identifica que é um computador */
/* @media (max-resolution: 1dppx) { 
@media (max-resolution: 1dppx) {
    .body {
		display: block;
    }
    .grad {
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
    }
}
*/

@media screen and (min-aspect-ratio: 1/1) {
    .body {
		display: block;
    }
    .grad {
    	z-index: -1;
    }
}