@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700);
@import url(https://fonts.googleapis.com/css?family=Montserrat);

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel="stylesheet">

html {
  background-image: url("https://hcm19.sapsf.com/public/ui-resource/amrmanagem/220;mod=ffae7802d9e9ce1a9b18724dc63613f3");
  Font-family: "Montserrat";
  -webkit-font-smoothing: antialiased;
  color: #FFFFFF;
  font-size: 100%;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%
}

Html{
<div class="ids-button-group ids-button-group--centered ids-button-group--login"><button class="ids-button ids-button--primary ids-button--login js-button-login" id="logOnFormSubmit" role="button" type="submit">Log In</button></div>
}

<style>
body {font-family: 'Montserrat';}

.svg {
    min-height: 100vh;
background: url(https://hcm19.sapsf.com/public/ui-resource/amrmanagem/220;mod=ffae7802d9e9ce1a9b18724dc63613f3);
Background-repeat: no-repeat;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
background-size: cover;
}


h1 {
  color: #FFFFFF;
  font-size: 25px;
  margin-bottom: 25px;
  Margin-top: 15px;
  Font-weight: 700;
  font-family: 'Montserrat';
}

ids-heading-1 {
  color: #FFFFFF;
  font-size: 25px;
  margin-bottom: 25px;
  Margin-top: 15px;
  Font-weight: 700;
  font-family: 'Montserrat';
}

h2 {
  color: #FFFFFF;
  font-size: 17px !important;
  font-family: 'Montserrat';
}

* {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

a {
  color: #6693F7;
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  text-decoration: underline;
  cursor: pointer;
}

a:visited {
  color: #6CC0ED;
}

@font-face {
font-family: 'Montserrat';
}

html, body {
  min-height: 100vh;
}

body {
  /* background-color: #0F477B; */
  padding-top: 100px;
  background-image: url(https://hcm19.sapsf.com/public/ui-resource/amrmanagem/220;mod=ffae7802d9e9ce1a9b18724dc63613f3);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.ids-input-group--login {
  margin: 0;
}

.ids-login-container {
Width: 375px;
}


.ids-container {
    margin: 0px auto;
    max-width: fit-content;
    background: rgba(15, 71, 123, 0.45);
    padding: 25px 10px 30px 10px;
    border: 1px solid #F3F8FF;
    Border-radius: 20px;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
}

.ids-login-sp {
  all: unset;
}

.ids-footer {
  display: none;
}

.ids-main {
background-color: transparent !important;
    background-position: center;
    min-height: 100vh;
}



.ids-login-sp__logo img {
Padding: 1px;
Max-height: 50px;
}


#forgotPasswordLink {
  color: #FFFFFF;
  font-size: 15px;
  font-family: 'Montserrat';
}

#j_username, #j_password #ids-heading-1 #ids-p {
  font-size: 14px;
  Background: #F3F8FF;
  font-family: 'Montserrat';
}

#test-service-provider-name{
  font-size: 18px;
  color: #FFFFFF;
  font-family: 'Montserrat';
  Font-weight: 700;
  Padding-top: 7px;
}

.fd-input-group {
Border-radius: 13px;
}

#test-service-provider-name {
  font-size: 20px;
}

.ids-login-login--border {
  border: none;
}

.ids-button-group {
  padding: 0 !important;
}

#j_password-label,
#j_username-label {
  color: #FFFFFF;;
  font-family: 'Montserrat';
  color: #FFFFFF;
  font-size: 17px;
  margin-bottom: 25px;
  Margin-top: 15px;
  Font-weight: 700;
}

.ids-label-container {
  height: 20px;
  line-height: 30px;
}

#rememberme-label {
  color: #FFFFFF;;
  font-family: 'Montserrat';
  color: #FFFFFF;
  font-size: 17px;
  margin-bottom: 25px;
  Margin-top: 15px;
  Font-weight: 500;
}

.ids-heading-1--login, .ids-heading-1 {
  font-size: 22px;
  color: #FFFFFF;
  Font-family: 'Montserrat';
  Font-weight: 700;
  padding-left: 20px;
  padding-right: 20px;
}

#ids-p {
    font-size: 14px;
    font-family: 'Open Sans';
    padding-left: 20px;
    padding-right: 20px;
}


.ids-label {
    font-size: 15px;
    Font-family: 'Montserrat';
    line-height: 1;
    color: #FFFFFF;
    Font-weight: 600;
}

.ids-required-marker {
    color: #9193FE;
}

.ids-form--horizontal .ids-input-group--text .ids-label-wrap, .ids-form--horizontal .ids-input-group--select .ids-label-wrap, .ids-form--horizontal .ids-input-group--aligned .ids-label-wrap {
    position: absolute;
}

.ids-control-container textarea, .ids-control-container input[type="text"], .ids-control-container input[type="password"], .ids-control-container input[type="email"], .ids-control-container input[type="tel"], .ids-control-container select {
    border-radius: 5px;
    border: none;
    height: 45px;
    background: #F3F8FF;
    font-family: 'Montserrat';
}



::-webkit-input-placeholder {
  color: transparent;
}
::-moz-placeholder {
  color: transparent;
}
:-ms-input-placeholder {
  color: transparent;
}

[data-page="ids-login/logon"] .ids-heading-1--login {
  display: none;
}

body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 3px;
    border: none;
    font: inherit;
    vertical-align: baseline;
}


button#logOnFormSubmit, button#sapStoreRegisterFormSubmit {
  text-transform: uppercase;
  background: #5c9bd6;
  width: 100%;
  border: 0;
  Border-radius: 23px;
  padding: 15px;
  font-size: 15px;
  cursor: pointer;
  font-family: 'Montserrat';
  Font-weight: bolder;
}

button#test-submit-button {
  text-transform: uppercase;
  background: #5c9bd6;
  width: 50%;
  border: 0;
  Border-radius: 23px;
  padding: 15px;
  font-size: 15px;
  cursor: pointer;
  font-family: 'Montserrat';
  Font-weight: bolder;
  Margin-left: 25%;
}


button#logOnFormSubmit:hover,
button#logOnFormSubmit:active,
button#logOnFormSubmit:focus,
button#test-submit-button:hover,
button#test-submit-button:active,
button#test-submit-button:focus,
button#sapStoreRegisterFormSubmit:hover
button#sapStoreRegisterFormSubmit:active,
button#sapStoreRegisterFormSubmit:focus {
  Background: #3587d4 ;
}

button#logOnFormSubmit:hover,
button#logOnFormSubmit:active,
button#logOnFormSubmit:focus {
  width: 100%;
}

.ids-input {
  padding: 15px !important;
}

.ids-button-group, .ids-login-login{
  width: 100%;
}

.ids-button-group .ids-button {
Float: none;
}

label#rememberme-label {
  color: #1B3761;
}

li.ids-input-group__item {
  text-align: left;
  letter-spacing: initial;
}

.ids-control-container textarea,
.ids-control-container input[type="text"],
.ids-control-container input[type="password"],
.ids-control-container input[type="email"],
.ids-control-container input[type="tel"],
.ids-control-container select {
  border-radius: 5px;
  border: none;
  height: 45px;
  font-family: 'Montserrat';

}


textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus {
    -moz-transition: box-shadow 0.3s ease-out;
    -o-transition: box-shadow 0.3s ease-out;
    -webkit-transition: box-shadow 0.3s ease-out;
    transition: box-shadow 0.3s ease-out;
    -moz-box-shadow: 0px 0px 3px #6CC0ED;
    -webkit-box-shadow: 0px 0px 3px #6CC0ED;
    box-shadow: 0px 0px 3px #6CC0ED;
    border: 1px solid #6CC0ED;
    background-color: #F3F8FF;
}


.ids-button {
  font-weight: normal;
}

.ids-login-section {
  padding: 0;
}

.ids-login-section li {
  margin: 20px 0 0 0;
}

.ids-login__forgotpassword {
  font-size: 14px;
  letter-spacing: 0;
}

.ids-login-login--border {
  padding-left: 0 !important;
}

.ids-login__forgotpassword a, a:hover, a:active, a:visited, a:focus{
  color: #FFFFFF !important;
}

#email-label {
Padding-top: 10px;
}

.ids-main__content {
 Padding-top: 100px;
}

[data-page="ids-forgot_password/create"] .ids-main .ids-main__content .ids-pw-container,
[data-page="ids-registration/new"] .ids-main .ids-main__content .ids-container,
[data-page="ids-reset_password/index"] .ids-main .ids-main__content .ids-container,
ids-main__content {
  background: #0F477B;
  padding: 25px 15px 25px 15px;
  text-align: center;
  border: 1px solid #e4e4fb;
}

[data-page="ids-reset_password/index"] .ids-main .ids-main__content .ids-container {
  position: static;


}


[data-page="ids-forgot_password/create"] .ids-main .ids-main__content .ids-pw-container .ids-heading-1 {
  position: static;
}


.ids-pw-container .ids-form--horizontal,
.ids-form ids-form--horizontal {
    *zoom: 1;
    width: 100%;
    margin: 0px auto;
    background: #F3F8FF;
    margin: 0px auto;
    padding: 20px 50px 50px 50px;
    border-radius: 20px;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
}


.ids-form--horizontal .ids-input-group--text .ids-label-container, .ids-form--horizontal .ids-input-group--select .ids-label-container, .ids-form--horizontal .ids-input-group--aligned .ids-label-container {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    text-align: left;
    width: 10%;
    min-width: 21px;
    min-width: 5.125rem;
    padding-right: 32px;
    padding-right: 2rem;
}

.is-hide .ids-input-reveal {
    top: 25px;
    right: 20px;
}

.is-show .ids-input-reveal {
    top: 25px;
    right: 20px;
}

.ids-form--horizontal .ids-input-group--text .ids-control-container, .ids-form--horizontal .ids-input-group--select .ids-control-container, .ids-form--horizontal .ids-input-group--aligned .ids-control-container {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: right;
    width: 100%;
    min-width: 240px;
    min-width: 15rem;
}

#ids-p {
  font-size: 13px;
    font-family: 'Open-Sans';
}

.ids-required-marker {
  color: #FFFFFF;
  Font-size: 20px;
}

.ids-form__required-index {
    font-size: 14px;
    /* font-size: 0.875rem; */
    text-align: right;
    font-family: 'Montserrat';
    font-weight: 400;
    color: #FFFFFF;
}

.ids-control-container textarea, .ids-control-container input[type="text"], .ids-control-container input[type="password"], .ids-control-container input[type="email"], .ids-control-container input[type="tel"], .ids-control-container select {
    border-radius: 5px;
    border: none;
    height: 45px;
    font-family: 'Montserrat';
    Background: #F3F8FF;
}

.ids-message--info.ids-message--icon {
    background-size: 18px;
    width: max-content;
}

.ids-message--info {
    background-color: #92c5fc;
    border: 1px solid #6CC0ED;
    color: #1B3761;
    Font-family: 'Open Sans', sans-serif;
}

.ids-message {
    background-color: #92c5fc;
    border: 1px solid #6CC0ED;
    color: #1B3761;
    Font-family: 'Open Sans', sans-serif;
}


.ids-icon--info, .ids-message--info.ids-message--icon, .ids-status.ids-status--info {
    background-image: url(https://i.imgur.com/RdYPHR6.png);
}

.ids-section {
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
    font-family: 'Open Sans', sans-serif;
}

.ids-input-hint {
Border-radius: 8px;
Background-color: #fff;
Border: apt solid #6CC0ED
Color: #1B3761;
Font-family: 'Open Sans', sans-serif;
}

.ids-input-hint-check {
    padding-left: 14px;
    background-repeat: no-repeat;
    background-size: 16px;
    background-image: url(https://i.imgur.com/oHBkq85.png);
    background-position: 0 3px;
}

.ids-input-hint-check.is-ok {
    background-image: url(https://i.imgur.com/itUNcny.png);
    color: #A2C99F;
    font-weight: bold;
}

.ids-icon--error, .ids-message--danger.ids-message--icon, .ids-message--error.ids-message--icon, .ids-status.ids-status--error {
    background-image: url(https://i.imgur.com/ppg6fV3.png);
}

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

  body {
    padding-top: 50px;
  }

  .ids-login-login--border {
    padding-left: 0;
  }

  .ids-login-login--border {
    padding-bottom: 18px;
  }

  .ids-heading-1--login{
    display: block;
  }

  .ids-input-group--user {
    padding-bottom: 18px;
  }

}

#ids-p {
    font-size: 14px;
    font-family: 'Open Sans';
    padding-left: 20px;
    padding-right: 20px;
	color: #FFFFFF;
}




@media only screen and (min-width: 600px)
.ids-login-container {
    width: 380px;
    padding-top: 100px;
}


@media only screen and (max-width: 991px) {
  button#test-submit-button, button#sapStoreRegisterFormSubmit {
    width: 100%;
    margin: 0;
  }
}

@media only screen and (min-width: 600px) {

  .ids-login-container {
    width: 380px
  }

}

@media only screen and (min-width: 768px) {
  body {
    padding-top: 80px;
  }
}

@media only screen and (min-width: 992px) {

  body {
    padding-top: 90px;
  }

  button#test-submit-button, button#sapStoreRegisterFormSubmit {
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    float: none;
  }

}
@media only screen and (min-width: 1200px) {
  body {
    padding-top: 30px;
  }
}