body {
	background-image: url("tela-onix-ERP.jpg.xhtml?ln=images") !important;
	background-repeat: no-repeat;
    background-size: cover !important;
    background-attachment: fixed;    
	color: white;
	font-size: 16px;
    padding: 0;
    margin: 0;
}

body, .ui-widget, .ui-widget .ui-widget {
	font-family: 'RobotoRegular', 'Helvetica Neue', Helvetica, sans-serif !important;
}

.header {
    font-weight: bold;
    display: block;
    margin-top: 18px;
    margin-bottom: 18px;
    font-size: 20px;
}

.ui-shadow,
.ui-dialog {
	box-shadow: none !important; }

button#cancelar {
 	background-image: none !important;
 	background-color: #ff6666!important;
 	border: none !important;
 	color: #fff !important;
 	font-weight: 100;
 	padding: 3px 5px;
}
 
.logo-login{
    padding: none;
    margin: 10px auto;
}

.logo-center{
	margin: 0 auto;
	position: absolute;
	top: 0;
	
    left: 15%;
    right: 15%;
    bottom: 0;
}

img{
	width:95%;
	max-width: 300px;
}

.ui-fluid .ui-inputtext{
	width: 80% !important;	
}

.ui-fluid .ui-password {
    width: 80% !important;	
}

.login-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
}

.login-form, .float-form {
    position: absolute;
    display: block;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
	border-radius: 10px;
	background-color: #3e5b88d9;
    width: 378px;
    padding-top: 10px;
    padding-bottom: 10px;
    opacity: 1;
    backdrop-filter: blur(20px);
    box-shadow: 0 5px 30px 10px #00000066;
    transform: translateY(0) translateZ(0);
    transition: all .5s ease;
}

.login-form.hidden, .float-form.hidden {
    z-index: -1;
    opacity: 0;
    transition: all .3s ease;
}

.login-form.hidden {
    transform: perspective(500px) translateZ(-300px);
}

.float-form.hidden {
    transform: translateY(200px);
}

.login-form .ui-messages, .login-form .messages {
    width: 100%;
}

.messages .ui-message, .messages .ui-messages {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.ui-message, .ui-messages {
    font-size: 16px;
}

.login-form > img, .recover-password-form > img {
    margin-bottom: 10px;
}

.login-form > label, .recover-password-form > label {
    margin-top: 10px;
    margin-bottom: 5px;
}

.login-form > p, .recover-password-form > p, .solicitar-acesso p {
    margin: 10px auto 10px auto;
    width: 80%;
    text-align: justify;
}

.login-input {
    border: none;
    border-radius: 6px;
    box-shadow: none;
    box-sizing: border-box;
    background: #bdc9db;
    margin-top: 10px;
    margin-bottom: 10px;
    transition: box-shadow .5s ease, background .5s ease;
}

.login-input:focus {
    box-shadow: 0 0 20px 5px hsla(217, 65%, 30%, 1) !important;
    background: white;
    transition: box-shadow .3s ease, background .3s ease;
}

.login-submit {
    margin-top: 20px;
    margin-bottom: 10px;
 	background-image: none;
 	background-color: #68a24d;
    padding: 3px;
 	border: none !important;
 	color: #fff;
 	width: 80% !important;
 	border-radius: 6px;
 	font-weight: bold;
    box-shadow: none;
    transition: all .5s ease;
}

.login-submit:hover {
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3);
    transition: all .3s ease;
}

.login-submit:active {
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
    transition: all .3s ease;
}

.login-submit .fa {
    transition: left .5s ease;
}

.login-submit:hover .fa {
    left: 6%;
    transition: left .3s ease;
}

.login-input, .login-submit, .secondary-button {
    width: 80%;
    font-size: 18px;
}

.link-green {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #adebad;
    text-decoration: none;
    background: transparent;
    border: none;
    box-shadow: none;
    font-weight: normal;
    font-size: 1rem;
    transition: color .5s ease;
}

.link-green .fa {
    margin-right: 10px;
}

.link-green:hover {
    color: palegreen;
    transition: color .3s ease;
}

.compatibility-message {
    background: #b3a806;
    color: white;
    text-align: justify;
    padding: 10px;
    font-size: 16px;
    font-weight: normal;
    line-height: 26px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.compatibility-message .icon {
    margin-right: 5px;
}

/* Custom Growl Message */
.custom-growl-message {
    position: fixed;
    top: 60px;
    left: 60px;
    background: white;
    color: black;
    border-radius: 5px;
    opacity: 0.9;
    display: block;
    padding: 10px;
    max-width: 500px;
    width: auto;
    line-height: 12px;
    padding-bottom: 30px;
    box-shadow: 0 3px 10px 5px #121212;
}

.custom-growl-message img {
    width: 32px;
    height: 32px;
    margin: 10px;
}

.custom-growl-message span {
    color: black;
    line-height: 12px;
    text-align: left;
}

.label {
    font-size: .9rem;
}

.solicitar-acesso {
    width: 462px;
    max-width: 95vw;
}

.secondary-button {
    display: block;
    margin-top: 10px;
    color: white;
    background: transparent;
    border: 2px solid #ffffff66;
    box-shadow: none;
    font-weight: normal;
    font-size: 1rem;
    border-radius: 8px;
    padding: 2px 4px 2px 25px;
    transition: all .5s ease;
}

.secondary-button .fa {
    color: white;
    opacity: 0;
}

.secondary-button:hover {
    background: lightgray;
    border-color: lightgray;
    color: black;
    box-shadow: 0 0 14px 2px #0000004d;
    transition: all .3s ease;
}

.secondary-button:hover .fa {
    color: black;
    opacity: 1;
}

.secondary-button-yellow {
    color: #f2f20d;
    border-color: #f2f20d66;
}

.secondary-button-yellow:hover {
    color: white;
    background: #82a008;
    border-color: #82a008;
}

.secondary-button-yellow:hover .fa, .secondary-button-cyan:hover .fa {
    color: white;
}

.secondary-button-cyan {
    color: #c6ece2;
    border-color: #24a88599;
}

.secondary-button-cyan:hover {
    color: white;
    background: #24a885;
    border-color: #24a885;
}

.stage {
    margin: 4px;
    border: 1px solid lime;
    padding: 2px;
    border-radius: 8px;
    background: lime;
    color: black !important;
}

@media screen and (max-width: 640px) {
    .custom-growl-message {
        width: 100%;
        max-width: auto;
    }
}

@media only screen and (max-width: 480px) {
    .logo-login h2 {
        font-size: 8vw;
    }
	img{
		width: 80%;
		max-width: none;
	}
    .login-form {
        width: 90%;
        font-size: 5vw;
    }
}