html, body, .wrapper {
    height:100%;

}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background: #4983E4;
    font-size: 14px;
    margin: 0;
    color: #ffffff;
    background: url("../Content/loginBKG01.png") no-repeat top, url("../Content/loginBKG02.png") no-repeat bottom;
    background-color: #4983E4;
    background-attachment: fixed;
}




.wrapper {
    display: flex;
    justify-content: center;
}

.loginBox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 600px;
    margin-bottom: 9px;
    border-radius: 10px;
    -webkit-box-shadow: 5px 5px 0px 0px rgba(0,30,132,0.5);
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,30,132,0.5);
    box-shadow: 5px 5px 0px 0px rgba(0,30,132,0.5);
}


.forgotPassword img{
    width: 200px;
}

.forgotPassword  .loginBox {
    width: 380px;
}

.forgotPassword .loginBox {
    grid-template-columns:auto;
}

.datosLogin {
    background: url("../Content/bkgLoginTop.png")no-repeat top center, url(../Content/bkgLoginBottom.png) no-repeat center bottom, #3F3F3F;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 22px 52px;
}

.datosLogin ul{
    padding: 0;
}

.datosLogin li {
  list-style: none;
  color: yellow;
  font-weight: bold;
  border: 1px solid;
  padding: 5px;
}

.forgotPassword .datosLogin {
    background-size: contain;
    padding: 22px;
    border-radius: 10px;
}

.forgotPassword h4{
    border:none;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 15px;
}

.forgotPassword .dx-field-item-label-text {
    color: #fff;
    font-size: 14px;
}

.forgotPassword .datosLogin input {
    margin:0;
}

.forgotPassword .dx-item {

    margin-bottom: 10px;
}


.datosLogin input, .datosLogin label {
    display: block;
    margin: 5px auto;
    width: 90%;
    padding: 2px;
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 3px;
    border-style: none;
}

.loginContainer {
    display: flex;
    flex-direction: column;
    align-self: center;
    text-align: center;
}

.imageLogin {
    background: url(../Content/bkgLoginGirl.png) bottom center no-repeat, #fff;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-position-y: calc(100% + 8px);
}

    .imageLogin img {
        padding: 8px 21px;
        width: 228px;
    }

.recordar {
    margin: 16px 0;
}

.recordar input, .recordar label {
    display: inline;
    width: auto;
}




button {
    background: #FF9500;
    color: #fff;
    padding: 5px 15px;
    border-radius: 5px;
    border-style: none;
    padding: 8px 33px;
    font-weight: bold;
    cursor:pointer;
}

a {
    color: #fff;
    line-height: 2;
    font-size: 12px;
}

a:visited {
color:#fff;
}

h4 {
    font-size: 14px;
    border-bottom: 1px solid #fff;
    padding-bottom: 5px;
    display: inline-block;
    margin: 25px 0 0;
    text-transform: uppercase;
    color: #FF9500;
}

/*----------------Queries-------------------*/

@media (max-width:645px) {
    .loginContainer {
      width: 100%;
      padding: 30px;
    }

    .loginBox {
        width: auto;
        grid-template-columns: 1fr;
    }

        .loginBox > div:nth-child(1) {
            order: 2;
        }
        
        .loginBox > div:nth-child(2) {
            order: 1;
        }

    .imageLogin {
        background: #fff;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 0;
    }

    .datosLogin {
        background: url("../Content/bkgLoginTop.png")no-repeat top center, url(../Content/bkgLoginBottom.png) no-repeat center bottom, #3F3F3F;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-top-left-radius: 0;
        padding: 22px 52px;
        background-size: contain;
    }

    .datosLogin img{
        width:50%;
    }
 }