body {
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background-image: url("../img/fondo.jpg");
    /*background: #56cfe1;*/
    /*background: #00C2CB;
    /*: linear-gradient(to bottom, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 61%,#2ab0ed 100%);*/
	background-size: cover;
	background-repeat: no-repeat;
}

.formulario {
    width: 400px;
    background: #152932;
    padding: 50px;
    border-radius: 10px;
}

form img{
    width: 100%;
    display: flex;
    justify-content: center;
}

form h4 {
    color: #fff;
    font-weight: 600;
    margin-bottom: 40px;
    font-size: 20px;
}

input {
    width: 100%;
    padding: 10px 50px;
    outline: none;
    border: none;
    border-bottom: 2px solid #ced4da;
    border-radius: 25px;
    
}

.input-client {
    width: 100%;
    padding: 10px 50px;
    outline: none;
    border: none;
    border-bottom: 2px solid #ced4da;
    border-radius: 25px;
    
}

.cont-wraper {
    position: relative;
}

.cont-wraper i {
    color: #6c757d;
}

.input-icon {
	position: absolute;
	font-size: 20px;
	height: 25px;
	width: 25px;
	left: 20px;
    top: 50%;
	transform: translateY(-50%);
}

.input-icon2 {
    margin-right: 20px;
    align-items: center;
    transform: translateY(-10%);
    font-size: 25px;
    padding:15px;
    position: absolute;
	position: absolute;
	height: 30px;
	width: 30px;
	left: 80%;
	top: 50%;
	transform: translateY(-82%);
	cursor: pointer;
	font-size: 20px;
	color: #152932; 
}


input::placeholder {
    color: #6c757d;
    font-weight: 300;
}
.cont-boton{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.bot-login{
    background:#00c2cb;
    color: #fff;
    width: 100%;
    padding: 10px 20px;
    border-radius: 25px;
    border: none;
    outline:none;
}

.bot-login:hover{
    background:#0097b2;
    transition: ease 0.5s;
}

.bot-client{
    background:#004aad;
    color: #fff;
    width: 100%;
    padding: 10px 20px;
    border-radius: 25px;
    border: none;
    outline:none;
}

.bot-client:hover{
    background: #38b6ff;
    transition: ease 0.5s;
}

.bot-cancelar{
    background:#bd0000;
    color: #fff;
    width: 100%;
    padding: 10px 20px;
    border-radius: 25px;
    border: none;
    outline:none;
}

.bot-cancelar:hover{
    background:#d80404;
    transition: ease 0.5s;
}

.cont-boton .btn-primary:hover {
    color: #00C2CB;
    transition: all 1s;
}

/* Validacion para Javascript */

.formulario .error {
    display: none;
    background-color: red;
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px 6px 0 0;
}

.formulario .error li {
    margin-left: 20px;
}

/* Error php */

.formulario .error_php {
    display: none;
    background-color: #b69121;
    color: #fff;
    padding: 10px 20px;
    border-radius: 0 0 6px 6px;
}

.formulario .error_php li {
    margin-left: 20px;
}

@media (max-width: 750px) {

    .input-icon2 {
        position: absolute;
        height: 30px;
        width: 30px;
        left: 78%;
        top: 50%;
        transform: translateY(-96%);
        cursor: pointer;
        font-size: 20px;
        color: #152932; 
    }

    .formulario {
        width: 380px;
        background: #152932;
        padding: 50px;
        border-radius: 10px;
    }
  }