body {
    height: 100vh;
    background-size: cover;
    background-attachment: fixed;
    background-color: #0249BA; /* For browsers that do not support gradients */
    background-image: linear-gradient(#0249BA, #1E6DB8, #3481B2, #4B9BB1, #5BB6B6, #68C7B8);
}


.page-content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* overflow: scroll; */
}


.image-left {
    width: 60%;
}


.container-card {
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Card Styles */
.card {
    width: 80%;
    /*    max-height: 100%;**/
    /* max-width: 100%;*/
}


.container-logo {
    margin-top: 3rem;
    margin-bottom: 5rem;
}

.image-left {
    width: 60%;
}


.image-right {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: right;
    border-radius: 0px 0.625rem 0.625rem 0px;
}



/* Styles for inputs */

.input-group {
    height: 5rem;
}

.custom-label {
    color: grey;
    font-weight: normal;
    font-size: 1.2rem;
}

.custom-input {
    background-color: #F6F6F6 !important;
    color: black !important;
    font-weight: normal;
    font-size: 1.2rem;
    border: none !important;
}

input::placeholder {
    color: #838383 !important;
    font-weight: normal;
    font-size: 1.2rem;
}


.custom-input-password::placeholder {
    color: black !important;
    font-weight: normal;
    font-size: 1.4rem;
}

.input-group-text {
    background-color: #F6F6F6;
    border: none;
}

.bi {
    color: black !important;
    font-size: 2rem !important;
}


/* Checkbox styles and text */

.form-check-input:not(:checked) {
    background-color: #D3D3D3 !important;
    border-radius: 0px;
}

.form-check-input {
    background-color: #6BCBB8 !important;
    border-radius: 0px !important;
}

.container-check {
    padding-top: 1.5rem !important;
}
.label-check {
    font-size: 1.15rem;
    font-weight: normal;
    color: #8D8D8D !important;
}

/* Button Login styles */


#button-login {
    background-color: #6BCBB8 !important;
    color: white !important;
    width: 100%;
    height: 5rem;
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border: 0 !important;
}


 #button-login:hover {
        background-color: #6BCBB8 !important;
}



#kt_submit {
    background-color: #6BCBB8 !important;
    color: white !important;
    width: 100%;
    height: 5rem;
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border: 0 !important;
}


    #kt_submit:hover {
        background-color: #6BCBB8 !important;
    }





/* Text styles Cuenta */
p {
    color: grey;
    font-weight: normal;
    font-size: 1.2rem;
}

.link-cuenta {
    cursor: pointer;
}

/* Cuenta styles */

.container-cuenta {
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

/* Fortgot Password styles */

.link-password > a {
    color: grey;
}

    .link-password > a:hover {
        color: grey;
    }


/* Styles for Footer*/

.container-footer {
    height: 10%;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.col-left-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}


.col-right-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.row-terms {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


.text-footer > a {
    color: white;
    font-weight: lighter;
    font-size: 1.2rem;
}

    .text-footer > a:hover {
        color: white;
    }





.form-control label {
    margin-bottom: 50px !important;
    background-color: lightblue !important;
}

.form-control[type="password"] {
    font-size: 25px !important;
}


/* Cuando la pantalla es menor a 650px (teléfonos)*/

@media only screen and (max-width : 650px) {


    .image-left {
        width: 70%;
    }

    .input-group {
        height: 2rem;
    }

    .button-login {
        height: 4rem;
    }
}

.card-recuperar{
    height: 652.8px !important;
}

.row-recuperar{
    height: 100%;
}
/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 991.98px) {
    .card-login {
        width: 100%;
    }

    .card-recuperar{
        width: 100%;
    }

    .image-right {
        object-position: center;
    }
}


@media only screen and (max-width: 600px) {
    .card-recuperar {
        height: 525px !important;
    }
}

    /* Style for login in Recuperar pass*/

    .link-sesion > a {
        color: grey;
    }

        .link-sesion > a:hover {
            color: grey;
        }


    /* Styles for Alerts */

    .btn-primary {
        background-color: #6BCBB8 !important;
    }


    .btn-warning {
        background-color: yellow !important;
    }

    .btn-danger {
        background-color: red !important;
    }