/* GLOBAL */
body {
	padding: 0 !important;
}
/* FORM */
.form{
	background-color: rgb(255,255,255,0); 
	width: 70%;
	height: 50%;
}


.form-control{
	color:white !important;	
	border-width: 1px;
	cursor: url("../images/login/Grupo 1099.png"), auto !important;
}

.text-whiteTitle {
		font-size: 30px;
		font-weight:bold;
		color: #ffffff; 	
		font-family: helvetica;
		text-shadow: 2px 2px 2px #002F6D !important;
	}

:focus::placeholder { color:transparent !important; }
::placeholder { color: #dbdbdb !important; }

/* HEIGHT & WIDTH */
.h-20-lh-17{
	height: 25px;
	line-height: 20px;
}


.h17-m25{
	width: 25px;
	height: 17px;
}

/* IMG-LOGOS */
.img-flag {
	width: 2.8em; 
	height: 1.6em;
	opacity: 0.3;
}

.img-logo-principal{
	width: 400px; 
}


.img-flag.active {
	opacity: 1;
}

.img-flag:not(.active):hover {
  	 box-shadow: 0 0 0.5rem 0.1rem black; 
}

.logo-img {
	max-width: 3em;
	cursor: pointer;
}

.flags{
	   top: 10px;
	   right: 15px;
	}
	
.position-btn-back{
	top: 2%;
	left: 5%;
}
		
.bg-image {
	background-image: url("../images/login/Grupo 1099.png");
	background-repeat: no-repeat;
	background-size: 60% 100%;
	background-position:right;
	z-index: 1;

}

.bg-imageCustomGif {
	background-image: url("../../static/fondoEmpresa.gif");
	background-repeat: no-repeat;
	background-size: 60% 100%;
	background-position:right;
	z-index: 1;

}

.bg-imageCustomPng {
	background-image: url("../../static/fondoEmpresa.png");
	background-repeat: no-repeat;
	background-size: 60% 100%;
	background-position:right;
	z-index: 1;

}

.bg-imagePortal {
	background: #002F6D !important;
}

.bg-imageCustomGifPortal {
	background-image: url("../../static/fondoEmpresa.gif");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position:right;
	z-index: 1;

}

.bg-imageCustomPngPortal {
	background-image: url("../../static/fondoEmpresa.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position:right;
	z-index: 1;

}

/* FONTS */


.font-version {
	color: #00326B; 
	font-size: 18px;
	font-family: helvetica;
}

.font-version-white{
	font-size: 16px !important;
	font-weight:bold;
	color: #ffffff;
}


/* BUTTONS & LINKS*/

.link {
	color: #002f6d;
	font-size: 12px;
	font-weight:bold; 
	text-decoration:none;
}

.font-invalid-login{
	color: #ff0000;
	font-size: 15px;
	font-weight:bold;
	font-family: "helvetica";
}

.font-succesful-recover{
	color: #ffffff; 
	font-size: 15px;
	font-weight:bold;
	font-family: "helvetica";
}

.z-modal-mask {
	opacity: 0.9 !important;
}

.h-100-content{
	height: 100%;
}

.fas{
	width: 20px;	
}


.text-whiteCustom {
	font-size: 16px;
	font-weight:bold;
	color: #ffffff; 	
	font-family: helvetica;
	text-shadow: 2px 2px 2px #002F6D !important;
}



.text-white {
	font-size: 14px;
	font-weight:bold;
	color: #ffffff; 	
	font-family: helvetica;
	text-shadow: 2px 2px 2px #002F6D !important;
}


@media only screen and (max-width: 360px) {

	.w-70 {
		width: 100%;
	}
	
	.w-80 {
		width: 80% !important;
	}
	
	.hlog-80 {
		height: 80% !important;
	}

	.img-logo-principal {
		width: 200px; 
	}
	
	.text-white {
		font-size: 12px;
		font-weight:bold;
		color: #ffffff; 	
		font-family: helvetica;
		text-shadow: 2px 2px 2px #002F6D !important;
	}
	
	.font-version {
		color: #ffffff; 	
		font-size: 18px;
		font-family: helvetica;
		text-shadow: 2px 2px 2px #002F6D !important;
	}

	.font-white {
		font-size: 22px;
		text-shadow: 2px 2px 2px #002F6D !important;
	}
	
	.form{
		width: 100% !important;
	}
	
	
	.font-version-white{
		font-size: 10px !important;
		font-weight:bold;
	}
	
	.font-copyr{
		color: #ffffff !important; 
		font-size: 11px;
		font-family: "helvetica";
		text-shadow: 2px 2px 2px #002F6D !important;
	}
	
	.stboldtitleMax {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 16px !important;
		font-style: normal;
		font-weight: bold;
		font-variant: normal;
		color: #002F6D;	
	}
	
	.hideDiv{
		display: none !important;
		visibility: hidden !important;
	}
	
	.divWidth{
		width: 100% !important;
	}
	
	.font-invalid-login{
		color: #ff0000;
		font-size: 15px;
		font-weight:bold;
		font-family: "helvetica";
	}
	
	.text-whiteTitle {
		font-size: 30px;
		font-weight:bold;
		color: #ffffff; 	
		font-family: helvetica;
		text-shadow: 2px 2px 2px #002F6D !important;
	}
	
	.text-whiteCustom {
		font-size: 10px;
		font-weight:bold;
		color: #ffffff; 	
		font-family: helvetica;
		text-shadow: 2px 2px 2px #002F6D !important;
	}
	
	.circle {
	    background: #ffffff !important;
	    border-radius: 50%;
	    width: 70px !important;
	    height: 70px !important;
	}
	
	.heightLogin{
		height:80px;
	}
	
}
	
@media only screen and (min-width: 361px) and (max-width: 461px) {	
	
	.w-70 {
		width: 100%;
	}
	
	.w-80 {
		width: 80% !important;
	}
	
	.hlog-80 {
		height: 80% !important;
	}

	.img-logo-principal {
		width: 200px; 
	}
	
	.text-white {
		font-size: 12px;
		font-weight:bold;
		color: #ffffff; 	
		font-family: helvetica;
		text-shadow: 2px 2px 2px #002F6D !important;
	}
	
	.font-version {
		color: #ffffff; 	
		font-size: 18px;
		font-family: helvetica;
		text-shadow: 2px 2px 2px #002F6D !important;
	}

	.font-white {
		font-size: 22px;
		text-shadow: 2px 2px 2px #002F6D !important;
	}
	
	.form{
		width: 100% !important;
	}
	
	
	.font-version-white{
		font-size: 11px !important;
		font-weight:bold;
	}
	
	.font-copyr{
		color: #ffffff !important; 
		font-size: 11px;
		font-family: "helvetica";
		text-shadow: 2px 2px 2px #002F6D !important;
	}
	
	.stboldtitleMax {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 16px !important;
		font-style: normal;
		font-weight: bold;
		font-variant: normal;
		color: #002F6D;	
	}
	
	.hideDiv{
		display: none !important;
		visibility: hidden !important;
	}
	
	.divWidth{
		width: 100% !important;
	}
	
	.font-invalid-login{
		color: #ff0000;
		font-size: 15px;
		font-weight:bold;
		font-family: "helvetica";
	}
	
	.text-whiteTitle {
		font-size: 30px;
		font-weight:bold;
		color: #ffffff; 	
		font-family: helvetica;
		text-shadow: 2px 2px 2px #002F6D !important;
	}
	
	.text-whiteCustom {
		font-size: 12px;
		font-weight:bold;
		color: #ffffff; 	
		font-family: helvetica;
		text-shadow: 2px 2px 2px #002F6D !important;
	}
	
	.circle {
	    background: #ffffff !important;
	    border-radius: 50%;
	    width: 85px !important;
	    height: 85px !important;
	}
	
	.heightLogin{
		height:100px;
	}
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (min-width: 461px) and (max-width: 840px) {
	.w-70 {
		width: 100%;
	}
	
	.w-80 {
		width: 70% !important;
	}
	
	.hlog-80 {
		height: 90% !important;
	}
	
	.img-logo-principal {
		width: 200px; 
	}
	
	.text-white {
		font-size: 12px;
		font-weight:bold;
		color: #ffffff; 	
		font-family: helvetica;
		text-shadow: 2px 2px 2px #002F6D !important;
	}
	
	.font-version {
		color: #ffffff; 	
		font-size: 22px;
		font-family: helvetica;
		text-shadow: 2px 2px 2px #002F6D !important;
	}
	
	.font-white {
		font-size: 22px;
		text-shadow: 2px 2px 2px #002F6D !important;
	}
	
	.form{
		width: 100% !important;
	}
	
	
	.font-version-white{
		font-size: 12px !important;
		font-weight:bold;
		color: #ffffff;
	}
	
	.font-copyr{
		color: #ffffff !important; 
		font-size: 15px;
		font-family: "helvetica";
		text-shadow: 2px 2px 2px #002F6D !important;
	}
	
	.stboldtitleMax {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 16px !important;
		font-style: normal;
		font-weight: bold;
		font-variant: normal;
		color: #002F6D;	
	}
	
	.hideDiv{
		display: none !important;
		visibility: hidden !important;
	}
	
	.divWidth{
		width: 100% !important;
	}
	

	
	.text-white {
		font-size: 18px;
		font-weight:bold;
		color: #ffffff; 	
		font-family: helvetica;
		text-shadow: 2px 2px 2px #002F6D !important;
	}
	
	.font-invalid-login{
		color: #ff0000;
		font-size: 15px;
		font-weight:bold;
		font-family: "helvetica";
	}
	
	.text-whiteTitle {
		font-size: 30px;
		font-weight:bold;
		color: #ffffff; 	
		font-family: helvetica;
		text-shadow: 2px 2px 2px #002F6D !important;
	}
	
	.circle {
	    background: #ffffff !important;
	    border-radius: 50% !important;
	    width: 120px !important;
	    height: 120px !important;
	}
	
	.heightLogin{
		height:120px;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 841px) and (max-width: 900px) {
	.w-70 {
			width: 100%;
	}
	
	.w-80 {
		width: 60% !important;
	}
	
	
	.font-version-white{
		font-size: 14px !important;
		font-weight:bold;
		color: #ffffff;
	}
	
	.font-copyr{
		text-shadow: 1px 1px 1px #ffffff;
	}
	
	.divWidth{
		width: 60% !important;
	}
	
	.form{
		width: 80%;
		height: 70%;
	}
	
	.font-copyr{
		color: #4d4d4d;
		font-size: 11px;
		font-family: "helvetica";
	}
	
	.text-whiteTitle {
		font-size: 30px;
		font-weight:bold;
		color: #ffffff; 	
		font-family: helvetica;
		text-shadow: 2px 2px 2px #002F6D !important;
	}
	
	.circle {
	    background: #ffffff !important;
	    border-radius: 50% !important;
	    width: 130px !important;
	    height: 130px !important;
	}
	
	.heightLogin{
		height:140px;
	}
}



/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 901px) and (max-width: 1600px)  {
	.img-logo-principal {
		width: 300px; 
	}
	
	.form{
		width: 80%;
		height: 55%;
	}
	
	.divWidth{
		width: 60% !important;
	}
	
	.font-copyr{
		color: #4d4d4d;
		font-size: 11px;
		font-family: "helvetica";
	}
	
	.text-whiteTitle {
		font-size: 30px;
		font-weight:bold;
		color: #ffffff; 	
		font-family: helvetica;
		text-shadow: 2px 2px 2px #002F6D !important;
	}
	
	.font-version-white{
		font-size: 16px !important;
		font-weight:bold;
		color: #ffffff;
	}
}