body {
	height: 100vh;
}

h1 {
	background: url(ui/logo-negro.png) no-repeat center center;
	background-size: cover;
	font-size: 0;
	display: block;
	height: 42px;
	width: 235px;
}

#login {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 235px;
	height: 100vh;
	margin: auto;
}

#login > p {
	margin: 30px 0;
	font-size: 16px;
}

form {
	width: 100%;
}

form > div {
	display: flex;
	flex-direction: column;
	margin-bottom: 15px;
}

form .mail {
	background: url(icons/mail.svg) no-repeat right 12px center;
	background-size: 15px;
}

form .mail.error {
	background: url(icons/mail-error.svg) no-repeat right 12px center;
	background-size: 15px;
}

form .contrasena {
	background: url(icons/contrasena.svg) no-repeat right 12px center;
	background-size: 15px;
}

form .contrasena.error {
	background: url(icons/contrasena-error.svg) no-repeat right 12px center;
	background-size: 15px;
}

form > a {
	opacity: .5;
}

form > a:hover, form .cancelar:hover {
	opacity: 1;
}

#botones {
	margin-top: 30px;
}

form .input:focus {
	border: solid 1px #000000;
}

form .btn {
	margin: auto;
}

form .btn.ingresar {
	margin: 30px auto 0;
    color: white !important;
}

form .cancelar {
	border: none;
	background: none;
	font-size: 15px;
	margin: 30px auto 0;
	display: block;
	cursor: pointer;
	opacity: .5;
}

img {
	display: none;
}

.ribbon-2 {
    --f: 10px;
    --r: 15px;
    --t: 10px;
    position: relative;
    inset: var(--t) calc(-1*var(--f)) auto auto;
    padding: 0 10px var(--f) calc(15px + var(--r));
    clip-path: polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%, calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)), var(--r) calc(50% - var(--f)/2));
    background: #019D4A;
    color: white;
    box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
    width: 100px;
    float: right;
    font-size: 12px;
}

form .password-toggle{
    display: flex;
}

form .password-toggle input{
    border: none !important;
    padding: 0 !important;
    flex: 1;
}

form .password-toggle a{
    width: 20px;
    background: url(icons/password-show.svg) center center/contain no-repeat, url(icons/pasword-hide.svg) -500px center/contain no-repeat;
    margin-left: 5px
}

form .password-toggle.error a{
    background-image: url(icons/password-show-error.svg), url(icons/pasword-hide-error.svg);
}

form .password-toggle.show a{
    background-position: -400px center, center center;
}

@media (min-width: 480px ) {
	#botones {
		justify-content: space-between;
		flex-direction: row-reverse;
		align-items: center;
	}
	
	form .btn, form .cancelar {
		margin: 0;
	}
}

@media ( min-width: 1024px ) {
	body {
		display: flex;
	}
	
	#login {
		width: 35%;
		padding: 0 5%;
	}
	
	img {
		display: block;
		width: 65%;
		object-fit: cover;
		object-position: bottom;
	}
}

@media ( max-width: 1024px ) {
    .logo-admin-login {
        display: block;
        width: 154px;
    }
}