@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&subset=latin,latin-ext);
/* FONTS & ICONS */

@font-face{
    font-family:"FontAwesome";
    font-weight:400;
    font-style:normal;
    src:url("../x_libs/fonts/fontawesome-regular-400.eot");
    src:url("../x_libs/fonts/fontawesome-regular-400.eot?#iefix") format("embedded-opentype"),
    url("../x_libs/fonts/fontawesome-regular-400.woff2") format("woff2"),
    url("../x_libs/fonts/fontawesome-regular-400.woff") format("woff"),
    url("../x_libs/fonts/fontawesome-regular-400.ttf") format("truetype"),
    url("../x_libs/fonts/fontawesome-regular-400.svg#fontawesome") format("svg");
}

@font-face{
    font-family:"FontAwesome";
    font-weight:300;
    font-style:normal;
    src:url("../x_libs/fonts/fontawesome-light-300.eot");
    src:url("../x_libs/fonts/fontawesome-light-300.eot?#iefix") format("embedded-opentype"),
    url("../x_libs/fonts/fontawesome-light-300.woff2") format("woff2"),
    url("../x_libs/fonts/fontawesome-light-300.woff") format("woff"),
    url("../x_libs/fonts/fontawesome-light-300.ttf") format("truetype"),
    url("../x_libs/fonts/fontawesome-light-300.svg#fontawesome") format("svg");
}

@font-face{
    font-family:"FontAwesome";
    font-weight:900;
    font-style:normal;
    src:url("../x_libs/fonts/fontawesome-solid-900.eot");
    src:url("../x_libs/fonts/fontawesome-solid-900.eot?#iefix") format("embedded-opentype"),
    url("../x_libs/fonts/fontawesome-solid-900.woff2") format("woff2"),
    url("../x_libs/fonts/fontawesome-solid-900.woff") format("woff"),
    url("../x_libs/fonts/fontawesome-solid-900.ttf") format("truetype"),
    url("../x_libs/fonts/fontawesome-solid-900.svg#fontawesome") format("svg");
}

@font-face{
    font-family:"WebFont";
    src:url("../x_libs/fonts/fontawesome-webfont.eot");
    src:url("../x_libs/fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"),
    url("../x_libs/fonts/fontawesome-webfont.woff2") format("woff2"),
    url("../x_libs/fonts/fontawesome-webfont.woff") format("woff"),
    url("../x_libs/fonts/fontawesome-webfont.ttf") format("truetype"),
    url("../x_libs/fonts/fontawesome-webfont.svg#fontawesome") format("svg");
    font-weight:400;
    font-style:normal
}

.qif {
    font-family: "FontAwesome";
    font-weight: 400;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
    vertical-align: middle;
	outline: initial !important;
}



.qif-ban:before {
    content: '\f05e';
}
.qif-caret:before {
    content: '\f0d7';
    font-weight: 900;
}
.qif-cash:before {
    content: '\f2e9';
}
.qif-check:before {
    content: '\f00c';
}
.qif-close:before,
.qif-delete:before {
    content: '\f00d';
}
.qif-device:before {
    content: '\f013';
}
.qif-edit:before {
    content: '\f040';
}
.qif-clear:before {
    content: '\f12d';
    font-weight: 600;
}
.qif-exit:before {
    content: '\f2f5';
}
.qif-favorites:before {
    content: '\f005';
}
.qif-fullscreen-toggle:before {
    content: '\f360';
}
.qif-grid-toggle:before {
    content: '\f00a';
}
.qif-keyboard-toggle:before {
    font-family: 'WebFont';
    content: '\f11c';
}
.qif-link:before {
    content: '\f35d';
}
.qif-minus:before {
    content: '\f068';
}
.qif-password::before {
    content: '\f023';
}
.qif-plus:before {
    content: '\f067';
}
.qif-printer:before {
    content: '\f02f';
}
.qif-product:before {
    content: '\f302';
}
.qif-remove:before {
    content: '\f1f8';
}
.qif-search:before {
    content: '\f002';
}
.qif-settings:before {
    content: '\f013';
}
.qif-sidebar-toggle:before {
    content: '\f03b';
}
.qif-sign-out::before {
    content: '\f011';
}
.qif-times:before {
    content: '\f057';
}
.qif-user::before {
    content: '\f007';
}
.qif-warning:before {
    content: '\f071';
}

/* PAGINA */


.error-login {
	font-size: 1em;
	line-height: 20px;
	font-weight: bold;
	text-decoration: none;
}

.alert{
	margin: 0px auto;
	width: 90%;
	font-size: 0.9em !important;
}

.alert .close {
	position: relative;
	top: -12px;
	right: -8px;
	line-height: 20px;
}

#error-div {
    margin-bottom: 20px;
}

@-webkit-keyframes bb_animation {
	to {background-position: 0 0;}
	from {background-position: 44px 0;}
}
@-moz-keyframes bb_animation {
	to {background-position: 0 0;}
	from {background-position: 36px 0;}
}
.pbar_block {
	width:200px;height:30px; border-radius:4px; position:relative; padding:1px; margin:auto;margin-bottom:10px;margin-top:20px;
	background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #949daa), color-stop(100%, #abb2bc));
	background: -webkit-linear-gradient(#949daa 0%, #abb2bc 100%);
	background: -moz-linear-gradient(#949daa 0%, #abb2bc 100%);
	background: -o-linear-gradient(#949daa 0%, #abb2bc 100%);
	background: -ms-linear-gradient(#949daa 0%, #abb2bc 100%);
	background: linear-gradient(#949daa 0%, #abb2bc 100%);
	-moz-transition: background-color 0.5s ease-in, border-color 1.5s ease-out, box-shadow 1.5s ease-out, opacity 0.5s;
	-webkit-transition: background-color 0.5s ease-in, border-color 1.5s ease-out, box-shadow 1.5s ease-out, opacity 0.5s;
	-o-transition: background-color 0.5s ease-in, border-color 1.5s ease-out, box-shadow 1.5s ease-out, opacity 0.5s;
	transition: background-color 0.5s ease-in, border-color 1.5s ease-out, box-shadow 1.5s ease-out, opacity 0.5s;
}
.pbar_block2  {
	height:28px;width:0px;border:none;border-radius:3px;left:0px;position:absolute;left:2px;
	-moz-transition-property:width;-webkit-transition-property:width;
	-moz-transition-timing-function:cubic-bezier(0,0,0,1);-webkit-transition-timing-function:cubic-bezier(0,0,0,1);
	-moz-transition-duration:7s;-webkit-transition-duration:7s;
	-webkit-background-size: 44px 44px;
	-moz-background-size: 36px 36px;
	background: -webkit-gradient(linear, 0 0, 44 44, color-stop(0, rgba(255, 255, 255, 0.17)), color-stop(0.25, rgba(255, 255, 255, 0.17)), color-stop(0.26, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0)), color-stop(0.51, rgba(255, 255, 255, 0.17)), color-stop(0.75, rgba(255, 255, 255, 0.17)), color-stop(0.76, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))), -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0.35))), #74d04c;
	background: -moz-repeating-linear-gradient(top left -30deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.17) 15px, rgba(255, 255, 255, 0) 15px, rgba(255, 255, 255, 0) 30px), -moz-linear-gradient(rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%), #74d04c;
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
	-o-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2);
	border: 1px solid #4c8932;
	-moz-animation: bb_animation 2s linear infinite;
	-webkit-animation: bb_animation 2s linear infinite;
	-o-animation: bb_animation 2s linear infinite;
	-ms-animation: bb_animation 2s linear infinite;
	-khtml-animation: bb_animation 2s linear infinite;
	animation: bb_animation 2s linear infinite;
}
.pbar_rojo {
	background-color: #C43C35 !important;
	border: 1px solid #9c302a;
}
.pbar_verde {
	background-color: #57A957!important;
	border: 1px solid #458845;
}
.pbar_block3  {width:200px;height:29px;font-size:12px;position:absolute;color: #fff;top:5px;left:10px;padding-top:0px;}
.pbar_label {position:relative; width:95%; text-align: center;}


/* ==========================================================================
   Login Box styles
   ========================================================================== */

/*Change Backgound image here */
html, body {
	width:100%; 
	height:100%; 
	padding:0px; 
	margin:0px;
	overflow: hidden;
	background: #121923; /* Old browsers */
	background: -moz-linear-gradient(0deg,  #283139 100%, #121923 50%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(100%,#283139), color-stop(50%,#121923)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(0deg,  #283139 50%,#121923 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(0deg,  #283139 50%,#121923 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(0deg,  #283139 50%,#121923 100%); /* IE10+ */
	background: linear-gradient(0deg,  #283139 1%,#121923 50%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#283139', endColorstr='#121923',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	background-attachment: fixed
}

body{
	
	/*background-size: cover;
	background: #191d1e url(../b_imgs/login/bg_2022.jpg) repeat;*/
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
	font-family: "Poppins" !important;
	font-size: 13px !important;
	height: 100vh; 


}

@keyframes fadein {
 0% {
 opacity:0;
 }

 100% {
 opacity:1;
 }
}

.fadeIn {
            -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
}



input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #333 inset !important;
    -webkit-text-fill-color: #d1d1d1; 
}


h4 {
    font-size: 1em;
    line-height: 1.3em;
}



.page-footer{
	z-index: 2;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 35px;
	line-height: 35px!important;
	background-color: rgba(0,0,0,0.65);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#41000000',endColorstr='#41000000');
	color: #f0f0f0;
	font: 10px 'GothamRoundedLight',sans-serif;
	text-transform: uppercase;
	overflow: hidden;
}


footer {
	padding: 0 15px 0 15px;
	color: #cccccc;
    font-size: 0.8em;
    line-height: 1.5em;
}

footer a {
	text-decoration: none!important;
	color: #cccccc !important;
    font-weight: 500;
}

footer .quartup {
	position: absolute;
	left: 15px;
	float: left;
}

footer .conditions {
	position: absolute;
	right: 105px;
	float: left;
}

footer .privacy {

	float: right;
}

#login-block{
	padding-top: 50px;
	padding-bottom: 25px;
     animation: fadein 4s;
	height: calc(100vh - 70px);
}
#login-block h3{
	color: #FFF;
	text-align: center;
	font-size:1.6em;
	text-shadow: 2px 2px 2px #222;
	font-weight: normal;
	visibility: hidden;

}

.login-box{
	z-index: 10000;
	margin-top:-35px;
	max-width:480px;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;


}

.lottie-logo {
    width: 335px; 
    height: 145px;
    margin-left:-10px;
}

.login-logo{
	text-align: center;
	/*padding: 5px 0 10px;*/
    visibility: hidden;
}

.login-logo img{
	border:0;
	visibility: visible;
    margin: 100px 0 -50px 0;
}


.login-form {
	font-family: "Poppins";
	margin-top: 0px;
}

.login-form form p{

	margin: 5px auto 20px;
	text-align: center;
	color:#FFF;
	text-shadow: 1px 1px 2px #000;
	
	border-radius: 5px;
	padding: 5px;
}

.login-box hr{
	margin:10px auto 20px;
	width:70%;
	border-top: 1px solid rgba(119, 118, 118, 0.4);
border-bottom: 1px solid rgba(240, 240, 240, 0.4);

    visibility: hidden;
}

/* Login Form */

.login-form .qif {
	top: 0px !important;
    right: initial !important;
    width: 20% !important;
    line-height: 55px !important;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
	color: #ff4742;
}

.login-form input{
	display: block;	
	letter-spacing: 1px;
	opacity: .9;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;

	height: auto;
	width: 100%;
	color: #b9b9b9;
	padding: 10px 0px 10px 50px;
	font-size: 1.2em;
    background-color:transparent;
    border-color: transparent;
    outline: none;
  
}

.login-form input:focus{
	opacity:1;
	outline: none;

}


.login-form .form-group {
   margin-bottom: 0;
}
.login-form .form-group:first-of-type input {
    border-top: 2px solid #444750;
}


/* Login Button */
.btn.btn-login {

	width: 40%;
    padding: 10px;
    margin: 25px 0 20px 0;
    color: #FFF;
    font-size: 1em;
    font-weight: 400;
    background-color: #444750;
    border: 0px;
    border-radius: 25px;
}

.btn.btn-login:hover {
    background-color: #ff4742;
	color: #fff;
}

.btn.btn-login:focus {

	background-color: #ff4742;
	color: #fff;
	outline:0px;
}
.btn.btn-reset{
	width: 180px;
	 margin: 25px 0 20px 70px;
	 font-size: 1em;
}
.login-links{
	font-size: 1em;
	text-align: center;
	padding: 5px 0;
	margin-bottom: 20px;

}
.login-links a{
	display:inline-block;
	padding:5px;
	opacity:1;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;

	color: #b9b9b9;
	font-size: 1em;
	font-weight: 500;
}
.login-links a:hover{
	text-decoration: none;
	color:#FFF;
	opacity:1;
	background: rgba(0, 0, 0, 0.25);
	border-radius: 5px;
}

label.checkbox {
	width: 70%;
	display: block;
	margin: 0 auto;
	color: white;
	text-shadow: 1px 1px 2px #000;
	background: rgba(0, 0, 0, 0.3);
	padding: 5px 25px;
	border-radius: 3px;
}
label.checkbox input{
	width:14px;
	margin: 4px 0 0;
	padding: 0;
	background: none;
	border: 0;
}
#footer-text, #footer-text a{
	text-align: center;
	text-decoration: none!important;
    color: #cccccc !important;
    font-weight: 500;
    word-spacing: 1px;
    letter-spacing: 1px;	
}




/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers)
=================================================================== */
@media only screen and (max-width: 479px) {
	#login-block{
		padding-bottom: 25px;
		padding-left: 20px;
        padding-right: 20px;
	}
	
	.lottie-logo {
    width: 335px; 
    height: 150px;
    margin-left:-25px;
}
	
/*	.login-logo img {
        max-width: 180px;
    }
*/
}

/* Tablet Portrait Size to Tablet Landscape Size (devices and browsers)
=================================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px){
	#login-block {
		margin: 0 auto;
		width: 42px;
		
	}

}




@media (min-width: 480px) and (max-width: 1024px) {
.col-sm-offset-4 {
    margin-left: 24.333333% !important;
}
.col-sm-4 {
    width: 50% !important;
}
}


#labelVerifica{
    font-weight: 500 !important;
}


/*/////////////// FORM STYLES ////////////////////*/

form .field-group {
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    display: flex;
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
    margin-bottom: 20px;
    padding: 2px 10px 2px 0;
	border-radius: 35px;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	-ms-border-radius: 35px;
	-o-border-radius: 35px;
}

form .field-group span {
    flex: 1;
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    width: 20%;               /* For old syntax, otherwise collapses. */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    color: #fff;
    background: transparent;
    line-height: 49px;
    text-align: right;
}

ul.list-login {
    margin-top: 1.5em;
    margin-bottom: 1em;
}

form .field-group .wthree-field {
    flex: 4 50%;
    -webkit-box-flex:4 50%;     /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 4 50%;        /* OLD - Firefox 19- */
    -webkit-flex: 4 50%;          /* Chrome */
    -ms-flex: 4 50%;             /* IE 10 */
}

.wthree-field button.btn {
    background: #fc636b;
    border: none;
    color: #fff;
    padding: 11px 15px;
	
    font-size: 15px;
    font-weight: 500;
    line-height: 25px;
	width:100%;
	margin-top:10px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
	border-radius: 35px;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	-ms-border-radius: 35px;
	-o-border-radius: 35px;
}

.wthree-field button.btn:hover {

	background-color: #ff4742;
	color: #fff;
	outline:0px;
}