body {
    /*
    margin-top: 20px;
    background: #FAFAFA;
    background-size: 100% 100%;
    background-repeat: no-repeat;
*/
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background-image: url('/../images/fundologin.jpg');
    background-size: cover;
    background-color: #173d33 !important;
    padding-top: 50px;
}

.form_login {
    /*
    background-image: url("img/usuarios.jpg");
*/
    background-size: auto 100%;
    background-position: top center;
    opacity: 0.9;
    border: 1px solid darkblue;
    border-radius: 3%;
    text-align: center;
    display: flexbox;
    justify-items: center;
    width: 300px;
    margin: auto;
}

.form_signin {
    opacity: 1;
    border: none;
    border-radius: 20%;
}

.imglogin {
    display:block;
    margin:auto;
}

.bg-c-blue {
    background: linear-gradient(45deg, #4099ff, #73b4ff);
}

.bg-c-green2 {
    background: linear-gradient(45deg, #173d33, #02775a);
}

.bg-c-green {
    background: linear-gradient(45deg, #2ed8b6, #59e0c5);
}

.bg-c-yellow {
    background: linear-gradient(45deg, #FFB64D, #ffcb80);
}

.bg-c-pink {
    color: #fff;
    background: linear-gradient(45deg, #2f0426, #9c27b0);
    margin-bottom: 0;
}

.camposlogin {
    border: 1px solid #ccc;
    border-radius: 2%;
    text-align: left;
    display: inline-block;
    padding: 5px;
    margin:5px;
}

.camposlogin i {
    width: 5%;
    text-align: right;
}

/* Bordered form */
form {
    border: 0px solid #f1f1f1;
}

/* Full-width inputs */
input[type=text],
input[type=password] {
    width: 90%;
    padding: 1px;
    margin: 1px;
    display: inline-block;
    border: none; /*1px solid #ccc;*/
    box-sizing: border-box;
    border-radius: 0%;
}

/* Set a style for all buttons */
button {
    /*
    background-color: #04AA6D;
    padding: 14px 20px;
*/
    color: #fff;
    background: linear-gradient(45deg, #2f0426, #9c27b0);
    border: 1px solid whitesmoke;
    border-radius: 40%;
    cursor: pointer;
    width: 100%;
    margin: 100px;
}

/* Add a hover effect for buttons */
button:hover {
    opacity: 0.8;
}

/* Extra style for the cancel button (red) */
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the avatar image inside this container */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}

/* Avatar image */
img.avatar {
    width: 40%;
    border-radius: 50%;
}

/* Add padding to containers */
.container {
    padding: 8px;
}

/* The "Forgot password" text */
span.psw {
    float: right;
    padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 400px) {
    span.psw {
        display: block;
        float: none;
    }


    .form_login {
        background-repeat: auto;
        background-size: auto;
    }

    .cancelbtn {
        width: 100%;
    }
    body {
        background-size: auto;
    }
}