html {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

.background_blur {
	position: fixed;
    inset: 0;
    backdrop-filter: blur(5px);
    pointer-events: none;
	z-index: -1;
}
.primary_container, .secondary_container {
    width: 24rem;
	height: 30rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.15);
	z-index: 1;
	background-color: #eeeeee90;
	display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.primary_container > *, .secondary_container > * {
	width: 80%;
    margin: 0.5rem auto;
}
.secondary_container {
	height: 44rem;
}
#Rect_ngulo_18 {
	opacity: 0.95;
}
.Rect_ngulo_18 {
	filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.161));
	position: absolute;
	overflow: visible;
	width: 308px;
	height: 388px;
	left: calc(50% - 154px);
	top: calc(50% - 194px);
}

/* Este grupo representa el logo*/
.logo_crux {
	width: 14rem;
}
#Grupo_14 {
	position: absolute;
	width: 69.88px;
	height: 84.054px;
	left: 0px;
	top: 0px;
	overflow: visible;
}
#Grupo_12 {
	position: absolute;
	width: 69.88px;
	height: 69.882px;
	left: 0px;
	top: 0px;
	overflow: visible;
}
.Trazado_1 {
	overflow: visible;
	position: absolute;
	width: 20.894px;
	height: 33.931px;
	left: 0px;
	top: 11.438px;
	transform: matrix(1,0,0,1,0,0);
}
.Trazado_2 {
	overflow: visible;
	position: absolute;
	width: 45.538px;
	height: 38.98px;
	left: 2.795px;
	top: 30.902px;
	transform: matrix(1,0,0,1,0,0);
}
.Trazado_3 {
	overflow: visible;
	position: absolute;
	width: 58.453px;
	height: 65.808px;
	left: 11.427px;
	top: 0px;
	transform: matrix(1,0,0,1,0,0);
}
#Grupo_13 {
	position: absolute;
	width: 15.799px;
	height: 18.246px;
	left: 48.334px;
	top: 65.808px;
	overflow: visible;
}
.Trazado_4 {
	overflow: visible;
	position: absolute;
	width: 15.799px;
	height: 18.246px;
	left: 0px;
	top: 0px;
	transform: matrix(1,0,0,1,0,0);
}
#Grupo_15 {
	position: absolute;
	width: 107.097px;
	height: 28.359px;
	left: 84.773px;
	top: 18.609px;
	overflow: visible;
}
.Trazado_5 {
	overflow: visible;
	position: absolute;
	width: 19.026px;
	height: 19.957px;
	left: 0px;
	top: 0px;
	transform: matrix(1,0,0,1,0,0);
}
.Trazado_6 {
	overflow: visible;
	position: absolute;
	width: 17.029px;
	height: 19.171px;
	left: 29.378px;
	top: 0.394px;
	transform: matrix(1,0,0,1,0,0);
}
.Trazado_7 {
	overflow: visible;
	position: absolute;
	width: 17.31px;
	height: 19.594px;
	left: 55.784px;
	top: 0.394px;
	transform: matrix(1,0,0,1,0,0);
}
.Trazado_8 {
	overflow: visible;
	position: absolute;
	width: 24.731px;
	height: 27.965px;
	left: 82.366px;
	top: 0.394px;
	transform: matrix(1,0,0,1,0,0);
}
#Grupo_16 {
	position: absolute;
	width: 85.604px;
	height: 8.142px;
	left: 88.598px;
	top: 45.369px;
	overflow: visible;
}
.Trazado_9 {
	overflow: visible;
	position: absolute;
	width: 8.284px;
	height: 8.094px;
	left: 0px;
	top: 0.048px;
	transform: matrix(1,0,0,1,0,0);
}
.Trazado_10 {
	overflow: visible;
	position: absolute;
	width: 8.427px;
	height: 8.142px;
	left: 17.166px;
	top: 0px;
	transform: matrix(1,0,0,1,0,0);
}
.Trazado_11 {
	overflow: visible;
	position: absolute;
	width: 6.951px;
	height: 8.094px;
	left: 35.203px;
	top: 0.048px;
	transform: matrix(1,0,0,1,0,0);
}
.Trazado_12 {
	overflow: visible;
	position: absolute;
	width: 1.428px;
	height: 8.094px;
	left: 51.316px;
	top: 0.048px;
	transform: matrix(1,0,0,1,0,0);
}
.Trazado_13 {
	overflow: visible;
	position: absolute;
	width: 7.154px;
	height: 8.094px;
	left: 62.658px;
	top: 0.048px;
	transform: matrix(1,0,0,1,0,0);
}
.Trazado_14 {
	overflow: visible;
	position: absolute;
	width: 5.88px;
	height: 8.094px;
	left: 79.724px;
	top: 0.048px;
	transform: matrix(1,0,0,1,0,0);
}

/* Este grupo representa el boton*/
.Trazado_20 {
	filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.102));
	overflow: visible;
	position: absolute;
	width: 122px;
	height: 52px;
	left: calc(50% - 75px);
	top: calc(50% + 110px);
	transform: matrix(1,0,0,1,0,0);
}
#ENTRAR {
	position: absolute;

	font-style: normal;
	font-weight: normal;
	font-size: 13px;
	color: rgba(255,255,255,1);
}

/* Este grupo representa el user y el login*/
.flex-column-center {
	display: flex;
    flex-direction: column;
    align-items: center;
}
.flex-row-center {
	display: flex;
	justify-content: center;
}

#_Olvidaste_tu_contrase_a_ {
	overflow: visible;
	white-space: nowrap;
	text-align: right;
	font-style: normal;
	font-weight: normal;
	color: rgba(112,112,112,1);
	margin: 1rem 0;
	position: relative;
}
#_Olvidaste_tu_contrase_a_ a {
	text-decoration: none;
	font-size: 14px;
	color: black;
}
#_Olvidaste_tu_contrase_a_ a:hover {
	text-decoration: underline;
}
.form_element {
	overflow: visible;
	width: 100%;
	text-align: left;
	font-style: normal;
	font-weight: normal;
	color: rgba(191,191,191,1);
}

.form_element.contrase_a {
	padding-top: 35px;
}

.form_element.errores, .text_error {
	width: auto;
	color: #FF0000;
	font-size: small;
	margin: 0;
}
.Linea {
	overflow: visible;
	width: 100%;
	height: 1px;
	left: 0px;
	transform: matrix(1,0,0,1,0,0);
}

.boton {
	position: relative;
	background-color: rgba(0,155,255,1);
	border-radius: 25px;
	border: none;
	color: white;
	padding: 10px 28px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	width: 100%;
}

.boton-secundario {
	position: relative;
	background-color: transparent;
	border-radius: 25px;
	border: 2px solid rgba(0,155,255,1);
	color: rgba(0,155,255,1);
	padding: 10px 28px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	width: 100%;
	transition: all 0.2s ease-in-out;
}

.boton-secundario:hover {
	background-color: rgba(0,155,255,0.1);
}

.login_html {
	height: 100%;
}

.login_body {
	height: 100%;
	width: 100%;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	font-family: 'Rubik', sans-serif;
}

.login_body input {
	font-size: 16px;
	border: thin solid gainsboro;
	padding: 0.6rem;
	border-radius: 8px;
	background-color: #e8f0fe;
}

.login_body input::placeholder {
	border: none;
}

.login_body label {
	color: black;
	font-weight: 500;
}

#Usuario, #Contrase_a {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

#password_eye_img {
	position: absolute;
	width: 20px;
	height: 20px;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}

.password_img_container {
	position: relative;
}

form {
	width: 100%;
}

#password {
	width: 93%;
}