@font-face {
	font-family: 'Roboto';
	src: url('/Fonts/Roboto/Roboto-Regular.eot'); /* IE9 Compat Modes */
	src: url('/Fonts/Roboto/Roboto-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	/* url('/Fonts/Roboto/Roboto-Regular.woff') format('woff'), Modern Browsers */
	url('/Fonts/Roboto/Roboto-Regular.ttf')  format('truetype'); /*, Safari, Android, iOS */
	/* url('/Fonts/Roboto/Roboto-Regular.svg#svgFontName') format('svg'); Legacy iOS */
  }

:root{
	/* --color-boton-over: #3f3f3f; */
	--color-boton-over: #2c8ddd;
	--color-tooltip: #3f3f3f;
	--color-lista-combo: rgba(255,254,255,0.9);
	--color-combo-item-over: #6f6f6f;
	--color-view-modal: rgba(0, 0, 0, 0.3);
	--color-thumb-scroll: rgba(84, 84, 84, 1);
	--color-texto-combo: #404040;
}
/*Lets start with the cloud formation rather*/

/*The container will also serve as the SKY*/

*{ margin: 0; padding: 0;}

.logo{
	/* background-image:url("../imagenes/login/spritesheet.png"); */
	background-image:url("../imagenes/login/Aticalogo.png");
	background-repeat: no-repeat;
	background-position-x: center;
	height: 80px;
	background-size: contain;
	margin: 25px 0px 40px 0px;
	/* animation: play 1.3s steps(22) infinite; */
}

@keyframes play {
	/*180 x 160 por frame*/
	100% { 
		background-position: 0px -5320px;
	 }
}

@keyframes boton-over {
	0% {background-color: white;}
	100% {background-color: var(--color-boton-over);}
}
/* .cuadros .x-panel-bwrap .x-panel-body{
	background-image:url("../imagenes/login/fondo.png");
} */

/*.login::before,*/.background{
	/* background-image: radial-gradient(circle, #ffffff 10%, #dfefff 70%, #d6e6fc 100%); */
	background-color: #506174;
	background-image: url(/Imagenes/login/Fondo.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: absolute;
	left: 0px;
	top: 0px;
	content: "";
    width: 100%;
    height: 100%;
	/* filter: blur(50px) brightness(.6); */
	/* -webkit-filter: blur(50px) brightness(.6); */
    /* opacity: .8; */
	/* transform: scale(1.2);	 */
	/* transition-property: background-image; */
	/* transition-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1); */
	/* transition-delay: 0.8s; */
	/* -webkit-transition-delay: 0.8s; */
	/* transition: all 0.5s; */
	/* -moz-transition: background-image 0.5s cubic-bezier(0.39, 0.58, 0.57, 1) 0.8s; */
	z-index: -1;
}

.x-panel-body{
	background-color:transparent;
}

.view_login,.view_login .x-form-item,.login .x-form-field, .view_login .x-form-empty-field, .view_login .link, .pwd-label, .view_login label.x-form-item-label, .view_login .x-form-display-field, .x-combo-list-item, .x-tip .x-tip-body,
.x-toolbar div, .x-tip .x-tip-header-text, .login label.x-box-item, .login .x-box-item a{
	color: white !important;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	/* font-weight: 600; */
	font-size: 13px;
	letter-spacing: 1px;
}
.view_login .label-container {
	position: absolute;
	width: 100%;
	bottom: 9px;
	transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.view_login .x-form-item label.x-form-item-label {
	left: 0;
    /* position: absolute; */
    /* width: 100%; */
	text-align: center;
	/* transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); */
}
.view_login .x-btn button {
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
}
.view_login .link {
	text-decoration: underline;
	cursor: pointer;
}
.login .x-form-item {
	margin-bottom: 8px;
}
.login .moderno {
	width: 230px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
.login .moderno.pwd {
	width: 170px;
}

.login .moderno::after {
	content:"";
	background: linear-gradient(to right, white 50%, var(--color-boton-over) 50%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    transition: all 0.2s linear;
	transition-property: background-position;
	background-position: left;	
	height: 2px;
	display: block;
}
/* .login .moderno.pwd::after {
	background-position: left;	
	background: linear-gradient(to right, white 50%, var(--color-boton-over) 50%);
	background-size: 200% 100%;
} */

.login .moderno.x-form-focus-field::after {
	background-position: right;
}
/* .login .moderno.pwd.x-form-focus-field::after {
	background-position: right;
} */
.view_login .row_captcha .x-form-item {
    margin-top: unset;
}
.view_login .x-form-item, .view_login .row_captcha{
    margin-top: 20px;
}
.view_login .x-form-item.mensaje_restablecer {
	margin-top: 5px;
}
.view_login .mensaje_restablecer .x-form-display-field {
	font-size: 10px;
	text-align: justify;
}
.view_login .restablecer .boton_moderno {
	margin-top: 0px;
}
.view_login .boton_moderno {
	margin-top: 30px;
}
.row_captcha {
	margin-left: auto;
	margin-right: auto;
}
.captcha {
    margin-top: 5px;
}

.login .moderno .tool-icon {
    display: block;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    margin: 0;
	bottom: 5px;
	cursor: pointer;
}
.login .moderno .tool-icon.recaptcha {
    background-image: url(/Imagenes/Login/reload_captcha.png);
}

.login .moderno .tool-icon.view-pwd{
    background-image: url(/Imagenes/Login/view-pwd.png);
}

/* .titulos{
	padding-left: 30px;
	padding-top: 40px;
	cursor: default;
	font-family: "Roboto";
}

.titulos .titulo{
	font-weight:600;
	color:#FFFFFF;
	font-size: 30px;
	margin-bottom:10px;
}

.titulos .subtitulo a{
	font-weight:300;
	color:#FFFFFF;
	font-size: 20px;
	text-decoration: none;
}

.cuadros {
	position:absolute;
	left:50%;
	margin-left:-400px;
	top:20%;
	padding-right: 50px;
} */

.x-panel-header{
	text-align: center;
	font-size:30px;
	height:25px;
}
.identificarse{
	text-align: center;
}
.identificarse .x-form-item label.x-form-item-label{
	font-weight:600;	
}

/* .main_box .x-box-inner:first {
	overflow:auto;
} */

/* .identificarse {
	border-radius:15px; 
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	
	-webkit-box-shadow: 0px 5px 10px 0px rgba(119,119,119,1);
	-moz-box-shadow: 0px 5px 10px 0px rgba(119,119,119,1);
	box-shadow: 0px 5px 10px 0px rgba(119,119,119,1);

	position:absolute;
	z-index:998;
	background-image: radial-gradient(circle, #ffffff 10%, #dfefff 70%, #d6e6fc 100%);
} */

/* .identificarse .x-panel-body{

	border-radius:15px; 
	-moz-border-radius:15px;
	-webkit-border-radius:15px; 
}*/

.identificarse .x-panel-header-text{
	font-weight:600;	
	font-size:20px !important;
	font-family:"Roboto";
}

/* .identificarse .x-form-item-label
{
	color: #111111 !important;
} */

.globoRojo{
	background-image:url('../Imagenes/login/globo_rojo.png');
	background-repeat: no-repeat;
	position:absolute;
	height: 63px;
	width: 154px;
	z-index:999;
}


.globoRojo .x-form-display-field{
	color: #FFFFFF;
	font-size:11px;
	font-weight: 600;
	font-family: "Roboto";
	padding: 6px 8px 6px 18px;
}

.imgHelpLogin
{
	background-image: url("../imagenes/login_question.png");
	background-repeat: no-repeat;
}
.imgHelpLogin:hover
{
	background-image: url("../imagenes/login_questionhover.png");
	background-repeat: no-repeat;
}

.view_login {
	width: 800px;
	position: absolute;
	transform: translateY(-50%) translateX(-50%);
	top:48%;
	left: 50%;
	background-color: var(--color-view-modal);
	border-radius: 20px;
	/* -webkit-box-shadow: 0px 5px 20px -5px rgba(119,119,119,1);
	-moz-box-shadow: 0px 5px 20px -5px rgba(119,119,119,1);
	box-shadow: 0px 5px 20px -5px rgba(119,119,119,1); */
}
.login .x-form-item .label-container, .login .x-form-item input, .boton_centrado, .boton_moderno, .login .x-form-text {
	text-align: center;
}
.boton_centrado {
	margin-left: auto;
	margin-right: auto;
}
.boton_moderno button {
	letter-spacing: 3px;
	text-transform: uppercase;
}
.login .boton_moderno button.x-btn-text{
	width: 140px;
	background-size: 18px;
	height: 28px;
	font-size: 13px;
	color: #3f3f3f;
	font-weight: 600;
}
.login .boton_moderno.short button {
	background-position: 2px center;
	width: 120px;
}
.login .short.x-btn-text-icon .x-btn-icon-medium-left .x-btn-text {
	padding-left: 24px
}
.login .x-btn-over button.x-btn-text.boton_ingresar, .boton_moderno.x-btn-focus button.x-btn-text.boton_ingresar{
	background-image: url(/Imagenes/login/ingresar_blanco.png);
}
.login .x-btn-over button.x-btn-text.boton_regresar, .boton_moderno.x-btn-focus button.x-btn-text.boton_regresar{
	background-image: url(/Imagenes/login/regresar_blanco.png);
}
.login .x-btn-over button.x-btn-text.boton_recuperar, .boton_moderno.x-btn-focus button.x-btn-text.boton_recuperar{
	background-image: url(/Imagenes/login/candado_white.png);
}

.login .x-btn-over button.x-btn-text, .boton_moderno.x-btn-focus button.x-btn-text{
	color: white;
	
}
.boton_ingresar {
	background-image: url(/Imagenes/login/ingresar.png)
}
.boton_regresar {
	background-image: url(/Imagenes/login/regresar.png)
}
.boton_recuperar {
	background-image: url(/Imagenes/login/candado.png)
}

.view_login .x-btn-tl, .view_login .x-btn-tr, .view_login .x-btn-tc, .view_login .x-btn-ml, .view_login .x-btn-mr, .view_login .x-btn-mc, .view_login .x-btn-bl, .view_login .x-btn-br, .view_login .x-btn-bc,
.x-combo-list .x-btn-tl, .x-combo-list .x-btn-tr, .x-combo-list .x-btn-tc, .x-combo-list .x-btn-ml, .x-combo-list .x-btn-mr, .x-combo-list .x-btn-mc, .x-combo-list .x-btn-bl, .x-combo-list .x-btn-br, .x-combo-list .x-btn-bc,
.x-tip .x-tip-tc,.x-tip .x-tip-tl, .x-tip .x-tip-tr, .x-tip .x-tip-bc,.x-tip .x-tip-bl, .x-tip .x-tip-br, .x-tip .x-tip-ml, .x-tip .x-tip-mr{
	background-image:none;
}
.boton_moderno {
	/* background-color: white; */
	background: linear-gradient(to left, white 50%, var(--color-boton-over) 50%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    transition: all 0.2s;
	transition-property: background-position;
	background-position: right;
	
	border-radius: 8px;
}
.boton_moderno.x-btn-over, .boton_moderno.x-btn-focus {
	background-position: left;
}
.boton_moderno.x-btn-click button {
	/* transform: translateY(2px); */
	transform: scale(.95);
}
.login .x-form-text{
	background-color: transparent !important;
	background-image: unset;
	border: none;
	height: 22px;
	padding-bottom: 3px;
}
.captcha img {
	filter: invert(1);
}


.login input:-webkit-autofill,
.login input:-webkit-autofill:hover, 
.login input:-webkit-autofill:focus, 
.login input:-webkit-autofill:active,
input:-internal-autofill-selected  {
	/* background-color: var(--color-view-modal) !important; */
	-webkit-transition-delay: 99999s;	
} 

.login_carrusel_container .view {
	width: 100%;
	height: 100%;
	display: flex;
	transition-duration: 0.5s;
	transition-property: all;
	transition-timing-function: ease-in-out;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-property: all;
	-moz-timing-function: ease-in-out;
	-webkit-timing-function: ease-in-out;
	transform: translate(0);
}

.login_carrusel_container .view .view-item {
    width: 400px;
    flex-shrink: 0;
    background-repeat: no-repeat;
	/* background-size: contain; */
	background-size: 400px 450px;
    background-position: center
}

.login_carrusel_container .cursor {
	width: 400px;
	height: 15px;
	/* display: flex; */
	position: absolute;
	bottom: 0px;
	left: 0px;
	text-align: center;
	padding: 0px 0px 4px 0px;
}

.login_carrusel_container .cursor .cursor-item {
	width: 10px;
	height: 10px;
	/* flex-shrink: 0; */
	/* background: linear-gradient(90deg, white, white); */
	border: white 1px solid;
	border-radius: 50%;
	display: inline-block;
	margin: 0 3px;
	cursor: pointer;
}

.login_carrusel_container .cursor .cursor-item.selected {
	background-color: white;
}

.identificarse .x-column-inner {
	display: flex;
	justify-content: center;
}
.identificarse .x-column {
	float: unset;
}

.view_login .x-form-field-wrap .x-form-search-trigger {
	background-image: url(/Imagenes/login/lupa.png);
	background-size: 12px;
    background-position: 3px 5px;
}
.login .x-form-field-wrap .x-form-arrow-trigger {
	background-image: url(/Imagenes/login/trigger_arrow.png);
	background-size: 12px;
    background-position: 0px 10px;
}
.view_login .x-form-field-wrap .x-form-clear-trigger {
	background-image: url(/Imagenes/login/tacha.png);
	background-size: 12px;
    background-position: 3px 5px;
}

.login .x-footer .x-trigger-wrap-focus .x-form-trigger, .login .x-footer .x-form-field-wrap .x-form-trigger-over, .login .x-footer .x-form-field-wrap .x-form-trigger-click, .login .x-footer .x-trigger-wrap-focus .x-form-trigger-over {
	background-position: 0px 10px;
}

.view_login .x-trigger-wrap-focus .x-form-trigger, .view_login .x-form-field-wrap .x-form-trigger-over, .view_login .x-form-field-wrap .x-form-trigger-click, .view_login .x-trigger-wrap-focus .x-form-trigger-over {
	background-position: 3px 5px;
}
.login .x-trigger-wrap .x-form-trigger,.login .x-trigger-wrap-focus .x-form-trigger,.login .x-form-field-wrap .x-form-trigger{
	border-bottom: 0px;
}

.x-combo-list-inner {
	background-color: transparent;
	padding-top: 4px;
	padding-bottom: 4px;
	scrollbar-color: var(--color-thumb-scroll) var(--color-lista-combo);
}
.x-combo-list {
	background-color: var(--color-lista-combo);
	border: 0px;
}
.x-combo-list-item, .x-toolbar div {
	color: var(--color-texto-combo) !important;	
	/* font-weight: lighter; */
}
.x-combo-list-item{
	border: 0px;
	padding: 3px;
	font-size: 12px;
}
.x-combo-list .x-combo-selected {
	color: white !important;
	border: 0px !important;
	background-color: var(--color-combo-item-over);
}

.x-combo-list-inner::-webkit-scrollbar-thumb {
    background-color: var(--color-thumb-scroll);
    border-radius: 10px;
}

.x-combo-list-inner::-webkit-scrollbar {
    background-color: var(--color-lista-combo);
    width: 7px;
}
.x-combo-list-inner::-webkit-scrollbar-button {
	background-position: center;
	background-repeat: no-repeat;
}
.x-combo-list-inner::-webkit-scrollbar-button:vertical:increment {
    background-image: url(/Imagenes/login/flecha_abajo.svg);
}
.x-combo-list-inner::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(/Imagenes/login/flecha_arriba.svg);
}
.x-combo-list .x-toolbar {
	background-image: none;
	background-color: transparent;
}
.x-combo-list .x-panel-bbar .x-toolbar{
    border: 0px;
    border-top: 1px solid;
    /* border-top: 0 none; */
    overflow: hidden;
	padding: 2px;
	border-color: var(--color-thumb-scroll);
}

.x-combo-list .x-item-disabled {
	opacity: 0.2;
}
.x-combo-list .x-tbar-page-first {
	background-image: url(/Imagenes/login/flecha_izquierda.svg) !important;
}
.x-combo-list .x-tbar-page-prev {
	background-image: url(/Imagenes/login/flecha_izquierda_2.svg) !important;
}
.x-combo-list .x-tbar-page-last {
	background-image: url(/Imagenes/login/flecha_derecha.svg) !important;
}
.x-combo-list .x-tbar-page-next {
	background-image: url(/Imagenes/login/flecha_derecha_2.svg) !important;
}
.x-combo-list .x-tbar-loading {
	background-image: url(/Imagenes/login/actualizar.svg) !important;
	background-size: 15px;
}
.x-combo-list .x-toolbar .xtb-sep {
	visibility: hidden;
}

.x-tip .x-tip-ml {
    background-color: var(--color-tooltip);
}
.x-tip {
    background-color: var(--color-tooltip);
    border: 1px solid var(--color-combo-item-over);
}

.x-tip .x-tip-body, .x-tip .x-tip-header-text {
	font-size: 11px;
	letter-spacing: 0px;
}
.x-combo-list .x-toolbar div {
	font-size: 11px;
	letter-spacing: 0px;
}
.x-combo-list .x-toolbar input {
	background-image: none;
	color: var(--color-texto-combo);
	background-color: transparent;
    border-width: 0px 0px 1px 0px;
}
.x-combo-list .x-btn-icon .x-btn-small .x-btn-text {
	height: 14px;
    width: 14px;
}

@keyframes onAutoFillStart {  from {/**/}  to {/**/}}
@keyframes onAutoFillCancel {  from {/**/}  to {/**/}}
input:-webkit-autofill {
    /* // Expose a hook for JavaScript when autofill is shown
    // JavaScript can capture 'animationstart' events */
    animation-name: onAutoFillStart;
    
}
input:not(:-webkit-autofill) {
    /* // Expose a hook for JS onAutoFillCancel
    // JavaScript can capture 'animationstart' events */
    animation-name: onAutoFillCancel;
}
input:-moz-autofill {
    /* // Expose a hook for JavaScript when autofill is shown
    // JavaScript can capture 'animationstart' events */
    animation-name: onAutoFillStart;
    
}
input:not(:-moz-autofill) {
    /* // Expose a hook for JS onAutoFillCancel
    // JavaScript can capture 'animationstart' events */
    animation-name: onAutoFillCancel;
}