body{
    background-image: url("../images/login_back.png");
}



/* LOGO */
.img-logo{
    position: absolute;
    height: 15%;
    left: 3%;
    top: 3%;
    transform: translate(0);
}

@media only screen and (max-width: 900px){
    .img-logo{
        display: block;
        height: 10%;
        top: 2%;
    }
}
/* * * * * * * * */



/* PANEL LOGIN */
.div-login{
    position: absolute;
    background-color: rgba(222, 227, 230, 0.7);
    width: 45%;
    height: 40%;
    top: 30%;
    border-style: outset;
    border-color: rgba(222, 227, 230, 0.7);
    border-width: 0.15em;
}

.div-header-login {
	position: absolute;
	width: 100%;
	height: 25%;
	left: 0;
	top: 3%;
}

.div-header-login p {
	text-align: center;
	color: rgb(80, 80, 80);
}

.div-id{
    position: absolute;
    text-align: left;
    width: 46%;
    height: 25%;
    color: rgb(80, 80, 80);
    left: 3%;
    top: 30%;
    background-color: rgb(255, 255, 255, 0.7);
}

.div-id-login-p,
.div-password-login-p{
    position: absolute;
    width: 100%;
    left: 3%;
    top: 3%;
}

.div-id-login{
    position: absolute;
    width: 94%;
    left: 3%;
    bottom: 20%;
}

.div-password{
    position: absolute;
    text-align: left;
    width: 46%;
    height: 25%;
    color: rgb(80, 80, 80);
    right: 3%;
    top: 30%;
    background-color: rgb(255, 255, 255, 0.7);
}

.div-password-login{
    position: absolute;
    width: 75%;
    left: 3%;
    bottom: 20%;
}

.div-partner{
    position: absolute;
    width: 46%;
    right: 3%;
    top: 58%;
    color: rgb(80, 80, 80);
}

.div-direct-reg {
	position: absolute;
    color: rgb(80, 80, 80);
    cursor: pointer;
	width: auto;
	left: 3%;
	top: 58%;
}

.div-direct-reg b {
    color: #7ab846;
    text-decoration: underline;
}

.div-login-button{
    position: absolute;
    width: 46%;
    height: 15%;
    right: 3%;
    bottom: 15%;
}

.div-login-button-p{
    position: absolute;
    width: auto;
    height: auto;
    right: 3%;
    bottom: 3%;
    color: rgb(80, 80, 80);
    cursor: pointer;
    white-space: nowrap;
    text-align: right;
}

.div-login-info{
    position: absolute;
    background-color: rgba(222, 227, 230, 0.7);
    height: 8%;
    width: 45%;
    top: 71%;
    border-style: outset;
    border-color: rgba(222, 227, 230, 0.7);
    border-width: 0.15em;
}

.div-login-info-contact{
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    top: 0;
}

.div-login-info-info{
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    top: 0;
}

.div-login-info-icon{
    position: absolute;
    width: auto;
    height: 100%;
    top: 0;
    cursor: pointer;
    left: 3%;
}

.div-login-info-icon img{
    position: absolute;
    height: 65%;
    top: 15%;
}

.div-login-info-p{
    position: absolute;
    text-align: left;
    width: auto;
    height: auto;
    color: rgb(80, 80, 80);
    left: 25%;
    top: 32%;
}

.input-text-login{
    width: 100%;
    color: rgb(80, 80, 80);
    background-color: rgb(255, 255, 255, 0);
    border-style: none;
}

.input-text-login:focus{
    outline: 0;
    background-color: rgb(255, 255, 255, 0);;
}

@media only screen and (max-width: 900px){
    .div-login {
        width: 93%;
        height: 50%;
        right: 3%;
        top: 15%;
    }

    .div-header-login {
        height: 20%;
    }

    .div-id {
        width: 94%;
        height: 22%;
        top: 25%;
    }

    .div-password {
        width: 94%;
        height: 22%;
        top: 50%;
    }

    .div-partner{
        width: auto;
        left: 3%;
        right: auto;
        top: 75%;
    }

    .div-direct-reg {
        top: 18%;
    }

    .div-login-button {
        height: 13%;
        bottom: 11%;
    }

    .div-login-button-p {
        bottom: 2%;
    }

    .div-login-info {
        height: 15%;
        width: 93%;
        right: 3%;
        top: 67%;
    }

    .div-login-info-contact {
        width: 100%;
        height: 50%;
    }

    .div-login-info-info {
        width: 100%;
        height: 50%;
        top: 50%;
    }
}
/* * * * * * * */



/* VER PASSWORD */
.div-password-eye{
    position: absolute;
    height: 25%;
    right: 5%;
    bottom: 25%;
    cursor: pointer;
}

.div-password-eye-profile {
	position: absolute;
	height: 75%;
	right: 0%;
	bottom: 10%;
	cursor: pointer;
	width: 7%;
}

.div-password-eye img,
.div-password-eye-profile img{
    height: 100%;
}
/* * * * * * * * */



/* PANEL RECUPERAR PASSWORD */
.div-recover {
	position: absolute;
	display: none;
	width: 30%;
	height: 25%;
	top: 30%;
	color: rgb(80, 80, 80);
	background-color: white;
	border-style: solid;
	border-color: rgb(205, 205, 205);
	border-width: 0.1em;
	box-shadow: 3px 3px 2px rgb(138, 138, 138);
	z-index: 18;
	border-radius: 1em;
}

.div-recover h2{
    position: absolute;
    left: 3%;
    top: 3%;
}

.ul-recover {
	position: absolute;
	list-style-type: none;
	margin: 0;
	padding: 0;
	top: 30%;
	width: 94%;
	left: 3%;
}

.ul-recover li {
	padding-top: 1vh;
	display: flex;
}

.div-button-send-recover {
	position: absolute;
	right: 3%;
	bottom: 5%;
	width: auto;
	height: 18%;
}

.input-recover{
    width: 100%;
	color: rgb(80, 80, 80);
	background-color: white;
	padding-left: 0.5em;
	border-radius: 0.3em;
	border-style: solid;
	border-color: rgb(240, 240, 240);
}

.input-recover:focus{
    border-color: rgb(20, 157, 204);
    outline: 0;
    -webkit-box-shadow: 0 0 0 2px rgba(87,168,233, .2);
    box-shadow: 0 0 0 2px rgba(87,168,233, .2);
    background-color: white;
}

@media only screen and (max-width: 900px){
    .div-recover {
        width: 94%;
        height: 30%;
        left: 2%;
        top: 15%;
    }

    .div-button-send-recover {
        height: 20%;
    }
}
/* * * * * * * * * * * * */



/* BOTON PERSONALIZADO */
.button-blue {
  background-color: rgb(102, 204, 255, 0.7);
}

.button-blue:hover {
  background-color: rgba(89, 181, 226, 0.7);
}

.button-blue:active {
  background-color: rgb(102, 204, 255, 0.7);
}
/* * * * * * * * * * * * * /