* { outline: none; }
input, select, button { font-family: inherit; font-size: inherit; }

.sapUiBody { background-image: url("./images/background_img.jpg") no-repeat top center; }
.sapUiBody { background-size: 100% auto; -webkit-background-size: 100% auto; background-attachment: scroll; }
.sapUiSraLoginView { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.sapUiSraBrandingBar { position: absolute; top: 0; left: 0; right: 0; height: 8px; z-index: 99; }
.sapUiSraHeader { text-align: center; position: absolute; top: 4px; left: 0; right: 0; background: rgba(0,0,0,0.6); box-shadow: inset 0px 0.5rem 0px 0px rgba(0,0,0,1); color: #ffffff; }
    .sapUiSraHeader .sapUiSraTitle { font-size: 1.25em; font-weight: 600; padding: 4px 16px; }
    .sapUiSraHeader .sapUiSraSubTitle { font-size: 1em; font-weight: 400; padding: 4px 16px; }
.sapUiSraFooter { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; z-index: 99; }
.sapUiSraFooterAbsolute .sapUiSraFooter { position: absolute; }
.brandingLogo1Class { position: absolute; top: 16px; left: 16px; height: 32px; }
.brandingLogo2Class { position: absolute; top: 16px; right: 16px; height: 32px; }
.sapUiSraLoginLogo { position: absolute; bottom: 16px; left: 16px; height: 32px; }
.sapUiSraLoginCopyright { position: absolute; bottom: 16px; right: 16px; font-size: 0.75em; max-width: 320px; text-align: right; }
.sapUiSraLoginNormalSep { margin-top: 64px; }
.sapUiSraLoginPage { margin-top: 180px; margin-right: auto; margin-left: auto; width: 400px; }
    .sapUiSraLoginPage .sapMBar { height: 40px; line-height: 40px; padding-left: 16px; padding-right: 16px; }
        .sapUiSraLoginPage .sapMBar + .sapMBar { margin-top: 8px; }
    .sapUiSraLoginPage .sapMLabel { font-size: 1em; white-space: normal; line-height: 40px; display: inline-block; }
    .sapUiSraLoginPage .sapMInputBase { margin: 0;  height: 40px; padding: 0px; }
    .sapUiSraLoginPage .sapMBtn { width: 100%;  height: 48px; padding: 0; }
    .sapUiSraLoginPage .sapMBtnContent { line-height: 40px; }
    .sapUiSraLoginPage .sapMBtnDefault, .sapUiSraLoginPage .sapMBtnEmphasized { vertical-align: baseline; }
    .sapUiSraLoginPage .sapMInputBaseInner { background-color: transparent; border-style: none; margin: 0; padding: 0 8px; width: 100%; position: absolute; top: 0px; height: 40px; }
    .sapUiSraLoginPage .sapUiSraMessage { height: auto; max-height: 64px; overflow-y: auto; line-height: normal; width: 368px; padding-top: 4px; padding-bottom: 4px; }
    .sapUiSraLoginPage .sapUiSraMessageContainer { margin-top: 16px; }
    .sapUiSraLoginPage .sapUiSraMessageError { border-color: @message_error_border_color; border-width: 2px; border-style: solid; background-color: @message_error_background_color; }
    .sapUiSraLoginPage .sapUiSraMessageInfo { background-color: @message_info_background_color; }
    .sapUiSraLoginPage .sapThemeText { font-size: 0.875em; line-height: normal; width: 100% !important; white-space:  pre-wrap !important;}
.sapUiSraMessageContainer .sapMBar { padding-left: 14px; padding-right: 14px; }
.sapUiSraBtnBlock { height: 48px; overflow: hidden; }
.sapUiSraLoginButtonBlock { margin-top: 10px; }
    .sapUiSraLoginButtonBlock .sapUiSraBtnBlock + .sapUiSraBtnBlock { margin-top: 12px; }
.sapUiSraSingleButtonBlock { margin-top: 48px; }
.sapUiSraLoginForm .sapMBar, .sapUiSraChangePwdForm .sapMBar { width: 368px; }
.sapUiSraLoginForm .sapMLabel { width: 120px; }
.sapUiSraLoginForm .sapMInputBase { display: inline-block; width: 248px; }
.sapUiSraChangePwdForm .sapMLabel { width: 176px; }
.sapUiSraChangePwdForm .sapMInputBase { display: inline-block; width: 192px; }
.sapUiSraChangePwdForm #USERNAME_FIELD-inner { padding: 0 8px; }
.sapUiSraChangePwdEndForm .sapMLabel { width: 256px; }
.sapUiSraTextError { color: rgb(229, 41, 41); }
.sapUiSraLoginChangePwd .sapMLabel { width: 100%; text-align: center; }
.sapUiMozSraSelect#LANGUAGE_SELECT { height: 1.25em; }
.sapMBtn.sapMBtnDefault:hover, .sapMBtn.sapMBtnDefault:focus { background-color: @button_focus_color; }
.sapMBtn.sapMBtnEmphasized:hover, .sapMBtn.sapMBtnEmphasized:focus { background-color: @button_submit_focus_color; }
.sapUiSraMessageError:hover, .sapUiSraMessageError:focus { background-color: @message_error_focus_color; }
.sapUiSraMessageInfo:hover, .sapUiSraMessageInfo:focus { background-color: @message_info_focus_color; }
@@media (max-height: 720px) {
    .sapUiSraLoginPage { margin-top: 40px; }
    .sapUiSraLoginButtonBlock { margin-top: 32px; }
    .sapUiSraSingleButtonBlock { margin-top: 32px; }
}
/* Background image */
@@media (orientation: portrait) {
    .sapUiBody { background-size: auto 100%; -webkit-background-size: auto 100%; }
}
/* Mobile portrait */
/*@@media (max-width: 480px) and (orientation: portrait), (max-width: 360px) {*/
 .sap-phone   .sapUiSraSubTitle { display: none; }
  .sap-phone  .sapUiBody {background-image: url("./images/background_img_mob.jpg") no-repeat top center; }
  .sap-phone  .sapUiSraLoginView { font-size: 0.875em; overflow: visible; }
  .sap-phone  .sapUiSraLoginCopyright { max-width: 160px; }
  .sap-phone  .sapUiSraLoginPage { margin-top: 30px; width: 288px; }
  .sap-phone      .sapUiSraLoginPage .sapUiSraMessage { max-height: 34px; width: 256px; }
  .sap-phone      .sapUiSraLoginPage .sapUiSraMessageContainer { margin-top: 8px; }
  .sap-phone  .sapUiSraLoginButtonBlock { margin-top: 8px; }
  .sap-phone  .sapUiSraSingleButtonBlock { margin-top: 8px; }
  .sap-phone  .sapUiSraLoginForm .sapMBar, .sapUiSraChangePwdForm .sapMBar { width: 256px; }
  .sap-phone  .sapUiSraLoginForm .sapMLabel { width: 120px; }
   .sap-phone .sapUiSraLoginForm .sapMInputBase { display: inline-block; width: 136px; }
  .sap-phone  .sapUiSraChangePwdForm .sapMLabel { width: 144px; }
  .sap-phone  .sapUiSraChangePwdForm .sapMInputBase { display: inline-block; width: 112px; }
/*}*/
@@media (max-height: 459px) and (orientation: portrait), (max-height: 459px) and (max-width: 360px) {
    .sapUiSraLoginHeight5 { height: 476px; }
        .sapUiSraLoginHeight5 .sapUiSraFooter { background-color: #f7f7f7; }
}
@@media (max-height: 411px) and (orientation: portrait), (max-height: 411px) and (max-width: 360px) {
    .sapUiSraLoginHeight4 { height: 428px; }
        .sapUiSraLoginHeight4 .sapUiSraFooter { background-color: #f7f7f7; }
}
@@media only screen and (max-height: 363px) and (orientation: portrait), (max-height: 363px) and (max-width: 360px) {
    .sapUiSraLoginHeight3 { height: 380px; }
        .sapUiSraLoginHeight3 .sapUiSraFooter { background-color: #f7f7f7; }
}
@@media only screen and (max-height: 315px) and (orientation: portrait), (max-height: 315px) and (max-width: 360px) {
    .sapUiSraLoginHeight2 { height: 332px; }
        .sapUiSraLoginHeight2 .sapUiSraFooter { background-color: #f7f7f7; }
}
/* Mobile landscape */
@@media (max-height: 568px) and (min-width: 361px) and (orientation: landscape) {
    .sapUiSraSubTitle { display: none; }
    .sapUiBody {background-image: url("/webapp/images/background_img_mob.jpg") no-repeat top center; }
    .sapUiSraLoginView { font-size: 0.875em; overflow: visible; }
    .sapUiSraLoginPage { margin-top: 48px; width: 400px; }
    .sapUiSraLoginCopyright { max-width: 320px; }
    .sapUiSraLoginPage .sapUiSraMessage { max-height: 34px; width: 368px; }
    .sapUiSraLoginPage .sapUiSraMessageContainer { margin-top: 8px; }
    .sapUiSraBtnBlock { height: 40px; }
    .sapUiSraLoginPage .sapMBtn { height: 40px; line-height: 40px; }
    .sapUiSraLoginPage .sapMBtnContent { line-height: 40px; }
    .sapUiSraLoginPage .sapMBar { }
    .sapUiSraLoginButtonBlock { margin-top: 8px; }
        .sapUiSraLoginButtonBlock .sapUiSraBtnBlock { display: inline-block; width: 192px; }
            .sapUiSraLoginButtonBlock .sapUiSraBtnBlock + .sapUiSraBtnBlock { margin-top: 0; margin-left: 16px; }
    .sapUiSraAfterLogin .sapUiSraLoginButtonBlock .sapUiSraBtnBlock { display: block; width: 400px; }
    .sapUiSraSingleButtonBlock { margin-top: 8px; }
    .sapUiSraLoginForm .sapMBar, .sapUiSraChangePwdForm .sapMBar { width: 368px; }
    .sapUiSraLoginForm .sapMLabel { width: 120px; }
    .sapUiSraLoginForm .sapMInputBase { display: inline-block; width: 248px; }
    .sapUiSraChangePwdForm .sapMLabel { width: 176px; }
    .sapUiSraChangePwdForm .sapMInputBase { display: inline-block; width: 192px; }
}
@@media (max-height: 395px) and (min-width: 361px) and (orientation: landscape) {
    .sapUiSraLoginHeight5 { height: 412px; }
        .sapUiSraLoginHeight5 .sapUiSraFooter { background-color: #f7f7f7; }
}
@@media (max-height: 347px) and (min-width: 361px) {
    .sapUiSraLoginHeight4 { height: 364px; }
        .sapUiSraLoginHeight4 .sapUiSraFooter { background-color: #f7f7f7; }
}
@@media (max-height: 299px) and (min-width: 361px) {
    .sapUiSraLoginHeight3 { height: 316px; }
        .sapUiSraLoginHeight3 .sapUiSraFooter { background-color: #f7f7f7; }
}
@@media (max-height: 251px) and (min-width: 361px) {
    .sapUiSraLoginHeight2 { height: 268px; }
        .sapUiSraLoginHeight2 .sapUiSraFooter { background-color: #f7f7f7; }
}
@@media (max-height: 200px) {
    .sapUiSraFooter { display: none; }
}
/* Login animation */
.sapUiSraLoginPage { opacity: 1; transform: scale(1); transition: all 0.5s cubic-bezier(0.420, 0.000, 0.580, 1.000); -webkit-transform: scale(1); -webkit-transition: all 0.5s cubic-bezier(0.420, 0.000, 0.580, 1.000); -ms-transform: scale(1); -ms-transition: all 0.5s cubic-bezier(0.420, 0.000, 0.580, 1.000); }
.sapUiSraLoginSplashScreen .sapUiSraLoginPage { opacity: 0.5; transform: scale(0.5); -webkit-transform: scale(0.5); -ms-transform: scale(0.5); }
.sapUiSraAfterLogin .sapUiSraLoginHidden { opacity: 0; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; -ms-transition: opacity 0.5s; }
.sapUiSraLoginBtnBlock { position: relative; }
.sapUiSraDisplayBeforeLogin { display: block; }
.sapUiSraAfterLogin .sapUiSraDisplayBeforeLogin { display: none; }
.sapUiSraDisplayAfterLogin { display: none; opacity: 0; transition: opacity 0.2s; -webkit-transition: opacity 0.2s; -ms-transition: opacity 0.2s; }
.sapUiSraAfterLogin .sapUiSraDisplayAfterLogin { display: block; opacity: 1; }
.sapUiSraLogonAnimation { display: none; opacity: 0; transition: opacity 0.2s; -webkit-transition: opacity 0.2s; -ms-transition: opacity 0.2s; }
.sapUiSraShowLogonAnimation .sapUiSraLogonAnimation { display: block; opacity: 1; }
#sapUiSraFlower { opacity: .5; position: absolute; right: 0; top: 0; left: 0; margin: 0 auto; padding-right: 25px; width: 25px; }
.sapUiSraFlowerBlossom { animation-name: sapUiSraFlowerBlossomRotate; animation-iteration-count: infinite; animation-timing-function: linear; position: absolute; height: 25px; width: 25px; transform-origin: 100% 100%; -webkit-animation-name: sapUiSraFlowerBlossomRotate; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; }
.sapMBtn .sapUiSraFlowerBlossom { position: absolute; margin-left: auto; margin-right: auto; top: -77px; left: -100px; right: 0; opacity: 0.5; height: 100px!important; width: 100px!important; }
#sapUiSraFlower .sapUiSraFlowerBlossom { animation-duration: 4s; -webkit-animation-duration: 4s; }
.sapUiSraFlowerLeafContainer { animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: linear; position: absolute; height: inherit; width: inherit; transform-origin: 100% 100%; -webkit-animation-direction: alternate; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; }
.sapUiSraFlowerLeaf { animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in; background-color: #009DE0; border-radius: 100px; border-bottom-right-radius: 0; position: absolute; height: inherit; width: inherit; transform-origin: 100% 100%; -webkit-animation-direction: alternate; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; }
.sapMBtn #sapUiSraFlower .sapUiSraFlowerLeaf { background-color: white; }
#sapUiSraFlower .sapUiSraFlowerLeafContainer1 { animation-duration: 4s; animation-name: sapUiSraFlowerFadeLeaf-1; -webkit-animation-duration: 4s; -webkit-animation-name: sapUiSraFlowerFadeLeaf-1; }
#sapUiSraFlower .sapUiSraFlowerLeafContainer2 { animation-duration: 10s; animation-name: sapUiSraFlowerFadeLeaf-2; -webkit-animation-duration: 10s; -webkit-animation-name: sapUiSraFlowerFadeLeaf-2; }
#sapUiSraFlower .sapUiSraFlowerLeafContainer3 { animation-duration: 9s; animation-name: sapUiSraFlowerFadeLeaf-3; -webkit-animation-duration: 9s; -webkit-animation-name: sapUiSraFlowerFadeLeaf-3; }
#sapUiSraFlower .sapUiSraFlowerLeafContainer4 { animation-duration: 6s; animation-name: sapUiSraFlowerFadeLeaf-4; -webkit-animation-duration: 6s; -webkit-animation-name: sapUiSraFlowerFadeLeaf-4; }
#sapUiSraFlower .sapUiSraFlowerLeafContainer5 { animation-duration: 10s; animation-name: sapUiSraFlowerFadeLeaf-5; -webkit-animation-duration: 10s; -webkit-animation-name: sapUiSraFlowerFadeLeaf-5; }
.sapUiSraFlowerLeaf1 { animation-duration: 0.75s; -webkit-animation-duration: 0.75s; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
#sapUiSraFlower .sapUiSraFlowerLeaf1 { animation-name: sapUiSraFlowerScaleLeaf-1; -webkit-animation-name: sapUiSraFlowerScaleLeaf-1; }
.sapUiSraFlowerLeaf2 { animation-duration: 0.5s; -webkit-animation-duration: 0.5s; transform: rotate(72deg); -moz-transform: rotate(72deg); -webkit-transform: rotate(72deg); }
#sapUiSraFlower .sapUiSraFlowerLeaf2 { animation-name: sapUiSraFlowerScaleLeaf-2; -webkit-animation-name: sapUiSraFlowerScaleLeaf-2; }
.sapUiSraFlowerLeaf3 { animation-duration: 0.6s; -webkit-animation-duration: 0.6s; transform: rotate(144deg); -moz-transform: rotate(144deg); -webkit-transform: rotate(144deg); }
#sapUiSraFlower .sapUiSraFlowerLeaf3 { animation-name: sapUiSraFlowerScaleLeaf-3; -webkit-animation-name: sapUiSraFlowerScaleLeaf-3; }
.sapUiSraFlowerLeaf4 { animation-duration: 0.9s; -webkit-animation-duration: 0.9s; transform: rotate(216deg); -moz-transform: rotate(216deg); -webkit-transform: rotate(216deg); }
#sapUiSraFlower .sapUiSraFlowerLeaf4 { animation-name: sapUiSraFlowerScaleLeaf-4; -webkit-animation-name: sapUiSraFlowerScaleLeaf-4; }
.sapUiSraFlowerLeaf5 { animation-duration: 1.3s; -webkit-animation-duration: 1.3s; transform: rotate(288deg); -moz-transform: rotate(288deg); -webkit-transform: rotate(288deg); }
#sapUiSraFlower .sapUiSraFlowerLeaf5 { animation-name: sapUiSraFlowerScaleLeaf-5; -webkit-animation-name: sapUiSraFlowerScaleLeaf-5; }
@@keyframes sapUiSraFlowerBlossomRotate {
    100% { transform: rotate(360deg); -moz-transform: rotate(360deg); }
}
@@-webkit-keyframes sapUiSraFlowerBlossomRotate {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@@keyframes sapUiSraFlowerFadeLeaf-1 {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}
@@keyframes sapUiSraFlowerFadeLeaf-2 {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}
@@keyframes sapUiSraFlowerFadeLeaf-3 {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}
@@keyframes sapUiSraFlowerFadeLeaf-4 {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}
@@keyframes sapUiSraFlowerFadeLeaf-5 {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}
@@-webkit-keyframes sapUiSraFlowerFadeLeaf-1 {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}
@@-webkit-keyframes sapUiSraFlowerFadeLeaf-2 {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}
@@-webkit-keyframes sapUiSraFlowerFadeLeaf-3 {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}
@@-webkit-keyframes sapUiSraFlowerFadeLeaf-4 {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}
@@-webkit-keyframes sapUiSraFlowerFadeLeaf-5 {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}
@@keyframes sapUiSraFlowerScaleLeaf-1 {
    100% { transform: scale(1.25) rotate(0deg); }
}
@@keyframes sapUiSraFlowerScaleLeaf-2 {
    100% { transform: scale(1.25) rotate(77deg); }
}
@@keyframes sapUiSraFlowerScaleLeaf-3 {
    100% { transform: scale(1.25) rotate(144deg); }
}
@@keyframes sapUiSraFlowerScaleLeaf-4 {
    100% { transform: scale(1.25) rotate(216deg); }
}
@@keyframes sapUiSraFlowerScaleLeaf-5 {
    100% { transform: scale(1.25) rotate(288deg); }
}
@@-webkit-keyframes sapUiSraFlowerScaleLeaf-1 {
    100% { -webkit-transform: scale(1.25) rotate(0deg); }
}
@@-webkit-keyframes sapUiSraFlowerScaleLeaf-2 {
    100% { -webkit-transform: scale(1.25) rotate(77deg); }
}
@@-webkit-keyframes sapUiSraFlowerScaleLeaf-3 {
    100% { -webkit-transform: scale(1.25) rotate(144deg); }
}
@@-webkit-keyframes sapUiSraFlowerScaleLeaf-4 {
    100% { -webkit-transform: scale(1.25) rotate(216deg); }
}
@@-webkit-keyframes sapUiSraFlowerScaleLeaf-5 {
    100% { -webkit-transform: scale(1.25) rotate(288deg); }
}