html, body { width: 100%; height: 100%; }
 body { margin: 0; padding: 0; background: White url("bck_sadrzaj.jpg") repeat-y 100% 100%; }
 form#login h1 { font-size: 1em; letter-spacing: 1px; color: #666; background:transparent; }
 .login_table{ height:100%; display:table; text-align:center; margin:auto; }
 #no_js { display: block; padding: 0; margin: 0; background-color: White; color: Red; font-weight: bold; position: absolute; padding-top: 75px; width: 35em; height: 17em; }
 #login-container{ vertical-align:middle; text-align:center; margin:auto; }
 #login-container form, #login-container p, #login-container div{ text-align:center; margin-left:auto; margin-right:auto; }
 #login { position: relative; width: 35em; background: #EEE; border: 1px solid #CCC; border-bottom: 1px solid #999; border-right: 1px solid #999; -moz-box-shadow: 2px 2px 1.111em #999; -webkit-box-shadow: 2px 2px 1.111em #999; box-shadow: 1.111em 1.111em 1.111em #999; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999') !important; }
 input { padding: 0.3em; margin: 0.3em 0.5em; border: 1px solid #CCC; background:#fff; font-size:1.2em; }
 input.button { background: #000 url("button_black.gif") repeat-x top; padding:0.3em 0.5em; font-weight:600; color: #FC0; border: 1px solid #EEE; cursor:pointer; }
 input:focus { border: 1px solid #69F; }
 #allowPopup { display: none; padding: 2.222em 1.111em; margin: 1.111em auto; width: 61.111em; border: 1px solid #CCC; border-bottom: 1px solid #999; border-right: 1px solid #999; font-weight: bold; color: Red; background: #FFF url("warning.gif") no-repeat 0.556em 50%; }
 .smallPrint { margin-top: 10%; width: 80%; color: #BBB; font-size: 0.9em; }
 #login_lockout { display: block; padding: 2.222em 1.111em; padding-left: 50px; margin: 1.111em auto; width: 61.111em; border: 1px solid #CCC; border-bottom: 1px solid #999; border-right: 1px solid #999; font-weight: bold; color: Red; background: #FFF url("warning.gif") no-repeat 0.556em 50%; text-align: center; }
 #login_lockout p { padding: 0; margin: 2px 0; }
 .login_mfa_note{ padding:0.3em; margin:0.3em 2em; margin-top: 0; color:#666; font-style:italic; }
 .mfa_resend_link{ display:inline; }
 .mfa_login_label{ padding-left:0.3em; margin-left: 2em; }
 .mfa_login_label_cell{ width:50%; white-space: nowrap; text-align:right; }
 .mfa_login_button{ margin:1.5em; margin-top:1em; }
 .mfa_h1{ text-align: right; }
 .mfa_error{ color:red; min-height: 2.5em; }
 .mfa_grey{ color: #666; }
 .login-recovery-code{ width: 150px; padding: 1em 2em; font-size: 1.2em; font-weight: bold; background: #f7f7f7; border: 1px solid #cdcdcd; color: #666; }
 .login-recovery-code:hover{ cursor: text; }
 .login-recovery-h1, .login-mfa-h1{ font-size: 1.4em; font-weight: bold; color: #666; }
 .login-recovery-note{ padding: 1.5em 2em; font-size: 1.1em; }
 .mfa-field-recovery{ text-align: center; color: #333; padding: 0.5em; }
 .login_mfa_note_li{ margin:0; }
 .login-mfa-ul{ margin-top: 2px; }
 .login-mfa-ul-note{ margin-bottom: 0; margin-top: 10px; margin-left: 25px; }
 .mfa-recovery-link{ padding:0; }
 .login-notif-containter{ display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; pointer-events: none; }
 .login-notif{ background-color: #fdfdfd; margin: 0 auto; padding: 1.5em; border: 1px solid #b5b5b5; border-radius: 3px; width: 400px; position:absolute; left: 50%; top: -50px; transform: translate(-50%, -50%); text-align: center; color:#666; font-size:1.2em; }
 .login-notif-error{ color: red; }
 @media screen and (max-width: 900px) { body { width:100%; }
 .login_table{ height: auto; width: 100vw; max-width: 100vw; }
 #login-container form, #login-container p, #login-container div{ text-align:left; margin-left:10px; margin-right:10px; }
 #login-container{ vertical-align:middle; text-align:left; }
 }