@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght@200;400&display=swap');

.loginBG {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100&0.25+0,0.26+100 */

	width  : 400px;
	height : 280px;
	margin : auto;
	z-index: 2;
}

.loginBG .loginPanel {
	background-image: -moz-linear-gradient none;
	background-image: -webkit-linear-gradient none;
	background-image: -ms-linear-gradient none;
	position        : absolute;
	width           : 382px;
	height          : 130px;
	z-index         : 3;
	left            : 125px;
	top             : 96px;
}

.loginBG .imagen {
	width      : 50%;
	position   : absolute;
	margin-left: 70px;
	margin-top : 55px;
}

.loginPanel form {
	position: relative;
	display : block;
	margin  : 10px 10px 10px 10px;
	width   : 260px;
}

.loginPanel input[type=text],
.loginPanel input[type=password] {
	background-color: #DFDDDD;
	box-shadow      : inset 0.1px 0.1px 0.8px 0.8px rgb(71, 164, 235);
	font-size       : 14px;
	color           : #000;
	border-width    : 2px;
	border-color    : rgb(71, 164, 235);
	border-radius   : 8px;
	padding         : 3px 3px 3px 3px;
	width           : 230px;
	height          : 30px;
	display         : inline-block;
	margin-top      : 15px;
	margin-left     : 40px;
	text-align      : center;
}

.loginBG .result {
	position         : absolute;
	text-align       : center;
	width            : 79px;
	bottom           : -120px;
	font-size        : 9px;
	font-weight      : bold;
	background-repeat: no-repeat;
	left             : 354px;
	height           : 20px;
}

/* Button */

.Elipse_1 {
	border-style    : solid;
	border-width    : 1px;
	border-color    : rgb(0, 0, 0);
	border-radius   : 50%;
	background-image: -moz-linear-gradient(90deg, rgb(53, 93, 167) 0%, rgb(71, 164, 235) 100%);
	background-image: -webkit-linear-gradient(90deg, rgb(53, 93, 167) 0%, rgb(71, 164, 235) 100%);
	background-image: -ms-linear-gradient(90deg, rgb(53, 93, 167) 0%, rgb(71, 164, 235) 100%);
	opacity         : 0.3;
	box-shadow      : 0px 3px 8px 0px rgba(0, 0, 0, 0.08), inset 0px 1px 0px 0px rgb(0, 0, 0);
	position        : absolute;
	left            : 788px;
	top             : 382px;
	width           : 69px;
	height          : 69px;
	z-index         : 6;
}

.loginPanel .bBlue {
	border-radius                                     : 10px;
	border                                            : 1.5px solid #FFFFFF;
	-webkit-box-shadow                                : 0 16px 20px -8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow                                   : 0 16px 20px -8px rgba(0, 0, 0, 0.3);
	box-shadow                                        : 0 16px 20px -8px rgba(0, 0, 0, 0.3);
	color                                             : #fff;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6f9ff7+0,355da7+100 */
	background                                        : rgb(111, 159, 247);
	/* Old browsers */
	background                                        : -moz-linear-gradient(top, rgba(111, 159, 247, 1) 0%, rgba(53, 93, 167, 1) 100%);
	/* FF3.6-15 */
	background                                        : -webkit-linear-gradient(top, rgba(111, 159, 247, 1) 0%, rgba(53, 93, 167, 1) 100%);
	/* Chrome10-25,Safari5.1-6 */
	background                                        : linear-gradient(to bottom, rgba(111, 159, 247, 1) 0%, rgba(53, 93, 167, 1) 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter                                            : progid:DXImageTransform.Microsoft.gradient(startColorstr='#6f9ff7', endColorstr='#355da7', GradientType=0);
	/* IE6-9 */
	height                                            : 28px;
	width                                             : 100px;
	right                                             : 60px;
	bottom                                            : -215px;
	position                                          : absolute;
}

.bBlue:hover {
	opacity           : 0.95;
	filter            : alpha(opacity=95);
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition   : opacity 0.2s ease-in-out;
	transition        : opacity 0.2s ease-in-out;
}

.bBlue:active {
	background        : #000000;
	box-shadow        : 0 0 2px #000000 inset, 0 1px 0 #fff;
	-webkit-box-shadow: 0 0 2px #000000 inset, 0 1px 0 #fff;
	-moz-box-shadow   : 0 0 2px #000000 inset, 0 1px 0 #fff;
}

body {
	/*
	background-color     : transparent;
	background-image     : url("../images/BG.jpg");
	background-repeat    : no-repeat;
	background-position  : center top;
	background-attachment: fixed;
	background-size      : cover;
	*/
	font-family: 'Poppins', sans-serif;
}

::-webkit-input-placeholder {
	/* Chrome */
	color: #000;
}

:-ms-input-placeholder {
	/* IE 10+ */
	color: 000;
}

::-moz-placeholder {
	/* Firefox 19+ */
	color  : 000;
	opacity: 1;
}

:-moz-placeholder {
	/* Firefox 4 - 18 */
	color  : 000;
	opacity: 1;
}

#cabecera {
	background-image   : url(../images/atn_ico.png);
	background-repeat  : no-repeat;
	background-position: 58px 24px;
	position           : fixed;
	color              : #FFF;
	font-size          : 14px;
	font-family        : "Courier New", Courier, monospace;
	top                : 7px;
	text-decoration    : none;
	right              : 23px;
	text-align         : center;
	width              : 146px;
	height             : 53px;
	-webkit-transition : all 300ms ease-in;
	-moz-transition    : all 300ms ease-in;
	transition         : all 300ms ease-in;
}

#cabecera:hover {
	position           : fixed;
	color              : #000;
	font-size          : 14px;
	font-weight        : normal;
	font-family        : "Courier New", Courier, monospace;
	background-image   : url(../images/atn_ico2.png);
	background-repeat  : no-repeat;
	background-position: 48px 24px;
}

#panel-pwd {
	z-index         : 2;
	position        : absolute;
	margin-left     : 32.8%;
	margin-top      : -200px;
	background-image: url(../images/pantalla_password3.png);
	width           : 500px;
	height          : 325px;
}

#txtHeaderPwd,
#txtEmpleado,
#txtUsuario,
#txtEmpleadoVal,
#txtUsuarioVal {
	font-size  : 14px;
	color      : #FFF;
	font-family: 'Poppins', sans-serif;
	position   : absolute;
}

#txtHeaderPwd {
	margin-left: 175px;
	margin-top : 9px;
}

#responsivePwd-1 {
	margin-left: 50px;
	margin-top : 17px;
}

#responsivePwd-2 {
	margin-left: 50px;
	margin-top : 5px;
}

#txtEmpleadoVal {
	margin-left: 150px;
	margin-top : 1px;
}

#txtUsuarioVal {
	margin-left: 150px;
	margin-top : 1px;
}

#txtPwdActual,
#txtPwdNva,
#txtPwdConfirma {
	color      : #FFF;
	font-family: 'Poppins', sans-serif;
}

#txtPwdActual {
	margin-top : 29px;
	margin-left: 45px;
}

#inputPwdAnt {
	margin-left: 11px;
	margin-top : 30px;
	border     : 0px solid;
	height     : 23px;
	width      : 205px;
	text-align : center;
}

#txtPwdNva {
	margin-top : 31px;
	margin-left: 113px;
}

#inputPwdNva {
	margin-left: 10px;
	border     : 0px solid;
	height     : 23px;
	width      : 205px;
	text-align : center;
}

#txtPwdConfirma {
	margin-top : 31px;
	margin-left: 163px;
}

#inputPwdConf {
	margin-left: 10px;
	border     : 0px solid;
	height     : 23px;
	width      : 205px;
	text-align : center;
}

#btnUpdatePwd,
#Cancelar {
	border  : 0px;
	position: absolute;
}

#btnUpdatePwd {
	position     : absolute;
	margin-left  : 212px;
	margin-top   : 39px;
	width        : 118px;
	border       : 1px solid #e0c716;
	border-radius: 3px;
}

#Cancelar {
	position     : absolute;
	margin-left  : 352px;
	margin-top   : 39px;
	width        : 118px;
	border       : 1px solid #e0c716;
	border-radius: 3px;
}

#forgotPwd {
	position   : absolute;
	color      : #003474;
	margin-top : 230px;
	margin-left: 49px;
}

@media screen and (min-width: 768px) {
	.modal-dialogForgot {
		position : absolute;
		/* float : left; */
		top      : 50%;
		left     : 50%;
		width    : 375px !important;
		transform: translate(-50%, -50%) !important;
	}
}

.modal {
	overflow-y: hidden;
}

.forgotHeader .close {
	margin-top: -20px;
	color     : #FFF;
	opacity   : 1;
}

#txtCambioPwd {
	color      : #FFF;
	font-family: 'Poppins', sans-serif;
	text-align : center;
}

.forgotHeader {
	background-color       : #003474;
	border-top-right-radius: 25px;
	border-top-left-radius : 25px;
}

.contentForgot {
	position          : relative;
	background-color  : #ffffff00;
	border            : 0px;
	-webkit-box-shadow: none;
}

.bodyForgot {
	background-color: #FFF;
	text-align      : center;
}

.footerForgot {
	padding                   : 19px 20px 20px;
	margin-top                : 0px;
	text-align                : center;
	border-top                : 0px;
	background-color          : #FFF;
	border-bottom-left-radius : 7px;
	border-bottom-right-radius: 7px;
}

.footerForgot label {
	font-family: 'Poppins', sans-serif;
	font-size  : 12px;
	color      : #003474;
}

#txtUsuarioF {
	color      : #003474;
	font-family: 'Poppins', sans-serif;
	font-size  : 15px;
}

#inputUsuarioF {
	border       : 1px solid #003474;
	border-radius: 12px;
	margin-bottom: 15px;
	padding-left : 8px;
	text-align   : center;
	font-weight  : 700;
}

#btnForgot {
	background-color: #003474;
	border-radius   : 20px;
	width           : 100px;
}

/** ### Cambios CxWeb @ 2021-05-13 **/

.container_main {
	margin-top: 10%;
}

#imgLogin_header {
	width     : 75%;
	text-align: center
}

#txtLogin_header {
	color      : #00339a;
	font-weight: bold;
	font-size  : 30px;
	margin-top : 2%;
}

#txtLogin_copyright {
	color      : #00339a;
	font-weight: 400;
	font-size  : 13px;
	text-align : center;
	margin     : auto;
}

.container_login {
	margin-top: 5%;
}

.container_login_main {
	border          : 5px solid #394557;
	background-color: #3e3e3e;
}

.container_login_form {
	/* height: 50px; */
	padding: 20px 0px;
}

#container_hr_login {
	width: 70%;
}

#input-login-user,
#input-login-pwd {
	width : 70%;
	margin: auto
}

#input-login-user {
	margin-bottom: 6%;
}

.form-control {
	border-radius: 0px !important;
	text-align   : center;
}

input:focus {
	outline: none;
	border : 1px solid #557799 !important;
	color  : #325a83 !important;
}

#txt_user:focus+span#input-icon-user {
	color: #557799;
}

#txt_pass:focus+span#input-icon-pwd {
	color: #557799;
}

span#input-icon-user,
span#input-icon-pwd {
	color: #909090;
}

span#input-icon-user:hover,
span#input-icon-pwd:hover {
	cursor: pointer;
}

#button-login {
	left: 59%;
}

#btnLogin {
	background-color: #00339a !important;
	border          : 1px solid #00339a;
	color           : #FFF;
	width           : 102px;
	height          : 32px;
	outline         : none;
}

#resultado {
	color         : #FFF;
	text-align    : center;
	font-size     : 16px;
	text-transform: uppercase;
	width         : 69%;
	padding       : 5px 0px;
	margin        : auto;
}