body {
    background-color: #F5F5F5;
}

.error-container p {
    color: red;
    text-align: center;
    /* margin-top: 4vw; */
    /* font-size: 3vw; */
}

@media (max-width: 576px) {
    .login-container {}

    .login-container .logo {
        position: relative;
        background-image: url(images/logo_BPS.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        width: 65%;
        height: 51vw;
        margin: auto;
        margin-top: 3%;
    }

    .login-container .login-form {
        width: 90%;
        margin: auto;
        background-color: #FFFFFF;
        border-radius: 25px;
        margin-top: 3%;
        height: 128vw;
        margin-bottom: 30px;
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
    }

    .login-container .login-form .login-image {
        width: 20%;
        height: 17vw;
        position: relative;
        background-image: url(images/padlock.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        top: -5%;
        left: 6%;
    }


    .login-container .login-form .header-title {
        text-align: center;
        font-size: 8vw;
        color: #002164;
        margin-top: -6.5vw;
    }

    .login-container .login-form .header-subtitle {

        font-size: 4.5vw;
        color: #002164;
        padding-left: 4.5vw;
        padding-right: 4.5vw;
        text-align: justify;

    }


    .login-container .login-form .input-container {
        width: 80%;
        margin: auto;
    }

    .login-container .login-form .input-container input {
        margin-top: 2% !important;
        background-color: #F1F1F1;
        width: 100%;
        height: 12vw !important;
        border: 0;
        border-radius: 10px;
        padding-left: 1vw;
        color: #9D9D9D;
    }

    .login-container .login-form .input-container select {
        margin-top: 2% !important;
        background-color: #F1F1F1;
        width: 100%;
        height: 12vw !important;
        border: 0;
        border-radius: 10px;
        padding-left: 1vw;
        color: #9D9D9D;
    }

    .login-container .login-form .button-container {
        margin-top: 5%;
    }

    .login-container .login-form .button-container .login-button {
        background-color: #002164;
        padding: 10px;
        color: #fff;
        width: 50%;
        text-align: center;
        border-radius: 17px;
        margin: auto;
        font-size: 5vw;
        cursor: pointer;
    }

    .forgot-password-container {
        width: 70% !important;
        margin: 0 auto;
        margin-top: 5% !important;
    }

    .forgot-password-container .forgot-password-text {
        text-align: center;
        font-size: 5vw !important;
        color: #002164;
        cursor: pointer;
    }

    .recaptcha-container {
        width: 66%;
        margin: auto;
        margin-top: 5%;
    }
}

@media (min-width:576px) and (max-width: 768px) {
    .login-container {}

    .login-container .logo {
        position: relative;
        background-image: url(images/logo_BPS.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        width: 35%;
        height: 25vw;
        margin: auto;
        margin-top: 3%;
    }

    .login-container .login-form {
        width: 90%;
        margin: auto;
        background-color: #FFFFFF;
        border-radius: 25px;
        height: 82vw;
        margin-bottom: 30px;
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
    }

    .login-container .login-form .login-image {
        width: 20%;
        height: 17vw;
        position: relative;
        background-image: url(images/padlock.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        top: -10%;
        left: 6%;
    }


    .login-container .login-form .header-title {
        text-align: center;
        font-size: 4vw;
        color: #002164;
        margin-top: -6.5vw;
    }

    .login-container .login-form .header-subtitle {

        font-size: 4.5vw;
        color: #002164;
        padding-left: 4.5vw;
        padding-right: 4.5vw;
        text-align: justify;

    }


    .login-container .login-form .input-container {
        width: 80%;
        margin: auto;
    }

    .login-container .login-form .input-container input {
        margin-top: 2% !important;
        background-color: #F1F1F1;
        width: 100%;
        height: 7vw !important;
        border: 0;
        border-radius: 10px;
        padding-left: 3vw;
        color: #9D9D9D;
    }

    .login-container .login-form .input-container select {
        margin-top: 2% !important;
        background-color: #F1F1F1;
        width: 100%;
        height: 7vw !important;
        border: 0;
        border-radius: 10px;
        padding-left: 3vw;
        color: #9D9D9D;
    }

    .login-container .login-form .button-container {
        margin-top: 5%;
    }

    .login-container .login-form .button-container .login-button {
        background-color: #002164;
        padding: 10px;
        color: #fff;
        width: 50%;
        text-align: center;
        border-radius: 17px;
        margin: auto;
        font-size: 3vw;
        cursor: pointer;
    }

    .forgot-password-container {
        width: 70% !important;
        margin: 0 auto;
        margin-top: 5% !important;
    }

    .forgot-password-container .forgot-password-text {
        text-align: center;
        font-size: 2.5vw !important;
        color: #002164;
        cursor: pointer;
    }

    .recaptcha-container {
        width: 47%;
        margin: auto;
        margin-top: 1%;
    }
}

@media (min-width:768px) and (max-width: 992px) {
    .login-container {}

    .login-container .logo {
        position: relative;
        background-image: url(images/logo_BPS.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        width: 65%;
        height: 51vw;
        margin: auto;
        margin-top: 3%;
    }

    .login-container .login-form {
        width: 90%;
        margin: auto;
        background-color: #FFFFFF;
        border-radius: 25px;
        margin-top: 3%;
        height: 119vw;
        margin-bottom: 30px;
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
    }

    .login-container .login-form .login-image {
        width: 20%;
        height: 17vw;
        position: relative;
        background-image: url(images/padlock.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        top: -4%;
        left: 6%;
    }


    .login-container .login-form .header-title {
        text-align: center;
        font-size: 8vw;
        color: #002164;
        margin-top: -6.5vw;
    }

    .login-container .login-form .header-subtitle {

        font-size: 4.5vw;
        color: #002164;
        padding-left: 4.5vw;
        padding-right: 4.5vw;
        text-align: justify;

    }


    .login-container .login-form .input-container {
        width: 80%;
        margin: auto;
    }

    .login-container .login-form .input-container input {
        margin-top: 2% !important;
        background-color: #F1F1F1;
        width: 100%;
        height: 10vw !important;
        border: 0;
        border-radius: 10px;
        padding-left: 1vw;
        color: #9D9D9D;
    }

    .login-container .login-form .input-container select {
        margin-top: 2% !important;
        background-color: #F1F1F1;
        width: 100%;
        height: 10vw !important;
        border: 0;
        border-radius: 10px;
        padding-left: 1vw;
        color: #9D9D9D;
    }

    .login-container .login-form .button-container {
        margin-top: 5%;
    }

    .login-container .login-form .button-container .login-button {
        background-color: #002164;
        padding: 10px;
        color: #fff;
        width: 50%;
        text-align: center;
        border-radius: 17px;
        margin: auto;
        font-size: 5vw;
        cursor: pointer;
    }

    .forgot-password-container {
        width: 70% !important;
        margin: 0 auto;
        margin-top: 5% !important;
    }

    .forgot-password-container .forgot-password-text {
        text-align: center;
        font-size: 5vw !important;
        color: #002164;
        cursor: pointer;
    }

    .recaptcha-container {
        width: 66%;
        margin: auto;
        margin-top: 5%;
    }
}

@media (min-width:992px) and (max-width: 1300px) {
    .login-container {}

    .login-container .logo {
        position: relative;
        background-image: url("images/logo_BPS.png");
        background-repeat: no-repeat;
        background-size: 100% auto;
        width: 18%;
        height: 11vw;
        margin: auto;
        margin-top: 3%;
    }

    .login-container .login-form {
        width: 46%;
        margin: auto;
        background-color: #FFFFFF;
        border-radius: 25px;
        margin-top: 3%;
        height: 37vw;
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
    }

    .login-container .login-form .login-image {
        width: 17%;
        height: 7vw;
        position: relative;
        background-image: url("images/padlock.png");
        background-repeat: no-repeat;
        background-size: 100% auto;
        top: -10%;
        left: 6%;
    }


    .login-container .login-form .header-title {
        text-align: center;
        font-size: 2.5vw;
        color: #002164;
        margin-top: -13%;
    }

    .login-container .login-form .header-subtitle {
        text-align: center;
        font-size: 0.7vw;
        color: #002164;
        padding-left: 1.5vw;
        padding-right: 1.5vw;
        text-align: justify;
        text-justify: inter-word;
    }


    .login-container .login-form .input-container {
        width: 80%;
        margin: auto;
    }

    .login-container .login-form .input-container input {
        margin-top: 1vw;
        background-color: #F5F5F5;
        width: 100%;
        height: 3.5vw;
        border: 0;
        border-radius: 11px;
        padding-left: 1vw;
        font-size: 1.5vw;
        color: #9D9D9D;
    }

    .login-container .login-form .input-container select {
        margin-top: 1vw;
        background-color: #F5F5F5;
        width: 100%;
        height: 3.5vw;
        border: 0;
        border-radius: 11px;
        padding-left: 1vw;
        font-size: 1.5vw;
        color: #9D9D9D;
    }

    .login-container .login-form .button-container {
        margin-top: 5%;
    }

    .login-container .login-form .button-container .login-button {
        background-color: #002164;
        padding: 10px;
        color: #fff;
        width: 50%;
        text-align: center;
        border-radius: 17px;
        margin: auto;
        font-size: 1.5vw;
        cursor: pointer;
    }

    .error-container p {
        height: 2vw;
        padding-top: 1vw;
    }

    .error-container {
        display: none;
    }

    .login-form .login-button img {
        width: 43px;
        height: 11px;
        background-size: 30px 30px;
    }

    .forgot-password-container {
        width: 50%;
        margin: 0 auto;
        margin-top: 2%;
    }

    .forgot-password-container .forgot-password-text {
        text-align: center;
        font-size: 1.5vw;
        color: #002164;
        cursor: pointer;
    }

    .recaptcha-container {
        width: 54%;
        margin: auto;
        margin-top: 2%;
    }

    /* .g-recaptcha {
        transform:scale(0.85);
        transform-origin:0 0;
    } */
}

@media (min-width:1301px) {

    .login-container .logo {
        position: relative;
        background-image: url("images/logo_BPS.png");
        background-repeat: no-repeat;
        background-size: 100% auto;
        width: 240px;
        height: 150px;
        margin: auto;
        margin-top: 3%;
        background-size: contain;
    }

    .login-container .login-form {
        width: 600px;
        margin: auto;
        background-color: #FFFFFF;
        border-radius: 25px;
        margin-top: 3%;
        height: auto;
        padding-bottom: 40px;
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
    }

    .login-container .login-form .login-image {
        width: 80px;
        height: 80px;
        position: relative;
        background-image: url("images/padlock.png");
        background-repeat: no-repeat;
        background-size: 100% auto;
        top: -40px;
        left: 0;
        margin-bottom: -40px;
    }

    .login-container .login-form .header-title {
        text-align: center;
        font-size: 28px;
        color: #002164;
        margin-top: 0;
        padding-top: 10px;
    }

    .login-container .login-form .header-subtitle {
        text-align: center;
        font-size: 14px;
        color: #002164;
        padding-left: 20px;
        padding-right: 20px;
        text-align: justify;
        text-justify: inter-word;
    }

    .login-container .login-form .input-container {
        width: 80%;
        margin: auto;
    }

    .login-container .login-form .input-container input {
        margin-top: 20px;
        background-color: #F5F5F5;
        width: 100%;
        height: 45px;
        border: 0;
        border-radius: 11px;
        padding-left: 15px;
        font-size: 16px;
        color: #9D9D9D;
    }

    .login-container .login-form .input-container select {
        margin-top: 20px;
        background-color: #F5F5F5;
        width: 100%;
        height: 45px;
        border: 0;
        border-radius: 11px;
        padding-left: 15px;
        font-size: 17px;
        color: #9D9D9D;
    }

    .login-container .login-form .button-container {
        margin-top: 30px;
    }

    .login-container .login-form .button-container .login-button {
        background-color: #002164;
        padding: 10px;
        color: #fff;
        width: 50%;
        text-align: center;
        border-radius: 17px;
        margin: auto;
        font-size: 18px;
        cursor: pointer;
    }

    .error-container p {
        height: 25px;
        padding-top: 5px;
    }

    .error-container {
        display: none;
    }

    .login-form .login-button img {
        width: 43px;
        height: 11px;
        background-size: 30px 30px;
    }

    .forgot-password-container {
        width: 50%;
        margin: 0 auto;
        margin-top: 25px;
    }

    .forgot-password-container .forgot-password-text {
        text-align: center;
        font-size: 16px;
        color: #002164;
        cursor: pointer;
    }

    .recaptcha-container {
        width: 54%;
        margin: auto;
        margin-top: 20px;
    }
}