body {margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:15px; color: #444;}
td, th, input, textarea, select {font-family: Arial, Helvetica, sans-serif; font-size: 15px;}
a img {border: 0;}

/*#login1 {width: 306px; position: absolute; top: 80px; left: 50%; margin-left: -153px; background: url(img/login-bg.gif) repeat-y;}
#login2 {background: url(img/login-bottom.gif) no-repeat bottom; position: relative; min-height: 294px;}
#login3 {background: url(img/login-top.gif) no-repeat top; padding: 28px 20px 25px 33px;}*/

/*form table {border: none;}
form table td, form table th {border: none; padding: 1px 3px; margin: 0;}
form th {font-weight: normal; text-align: right; color: #000;}*/

/*.tlacitko {background: #4D7299 url(img/bg-tlacitko.gif) repeat-x top; color: #fff; font-weight: bold; cursor: pointer; padding: 1px 2px; border: none; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #2F475F; border-bottom: 2px solid #2F475F;}*/


#login1 {
    width:100%; 
    height:100vh; 
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-justify-content: center; 
    justify-content: center;
    align-items: center;
    padding:10px;
    -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
}
#login2 {width:100%; max-width:300px; position:relative; padding:40px; background:#d7d7d7; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; -moz-box-shadow: 0 -3px 8px #bfbfbf inset; -webkit-box-shadow: 0 -3px 8px #bfbfbf inset; box-shadow: 0 -3px 8px #bfbfbf inset; margin:0 0 15% 0}
.logoLogin {margin:0 auto 1.5em auto; 
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-justify-content: center; 
    justify-content: center;

}
.logoLogin a {display:block; height:54px; overflow: hidden;}
.logoLogin img {min-width:200px}
#login2 p {font-size:1em; margin:0 0 1em 0; text-align:center; line-height:1.3em;}
.formWrap .formItem {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    margin:0 0 0.5em 0;
    align-items: center;
    position:relative;
}
/*.formWrap .formItem label {
    display:block; width:130px; margin:0 10px 0 0; font-size:1em;
}*/
.formWrap .formItem label {display:none;}
.formWrap .formItem input {height:40px; border:1px solid #2F475F; background:#fff; width:100%; padding:0 10px 0 56px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;}
.submitItem {margin:0 0 2em 0;}
.submitItem input {padding:0 20px; width:100%; text-align:center; height:40px; cursor:pointer; background:#4d7299; border:none; color:#fff; text-transform: uppercase; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;}
.submitItem input:hover {background:#294d73;}
.itemUzivatel:after, .itemHeslo:after {content:""; width:1px; height:60%; position:absolute; top:20%; left:44px; background:#b5bbba; z-index:5}
.itemUzivatel:before, .itemHeslo:before {content:""; width:20px; height:20px; position:absolute; top:10px; left:15px; background-size:20px; z-index:5}
.itemUzivatel:before {background:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20448%20512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23878684%22%20d%3D%22M224%20256c70.7%200%20128-57.3%20128-128S294.7%200%20224%200%2096%2057.3%2096%20128s57.3%20128%20128%20128zm89.6%2032h-16.7c-22.2%2010.2-46.9%2016-72.9%2016s-50.6-5.8-72.9-16h-16.7C60.2%20288%200%20348.2%200%20422.4V464c0%2026.5%2021.5%2048%2048%2048h352c26.5%200%2048-21.5%2048-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") no-repeat left top;}
.itemHeslo:before {background:url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20448%20512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23878684%22%20d%3D%22M400%20256H152V152.9c0-39.6%2031.7-72.5%2071.3-72.9%2040-.4%2072.7%2032.1%2072.7%2072v16c0%2013.3%2010.7%2024%2024%2024h32c13.3%200%2024-10.7%2024-24v-16C376%2068%20307.5-.3%20223.5%200%20139.5.3%2072%2069.5%2072%20153.5V256H48c-26.5%200-48%2021.5-48%2048v160c0%2026.5%2021.5%2048%2048%2048h352c26.5%200%2048-21.5%2048-48V304c0-26.5-21.5-48-48-48zM264%20408c0%2022.1-17.9%2040-40%2040s-40-17.9-40-40v-48c0-22.1%2017.9-40%2040-40s40%2017.9%2040%2040v48z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") no-repeat left top}

@media screen and (max-width: 400px) {
    .formWrap .formItem label {width:100%; margin:0 0 5px 0;}
    .formWrap .formItem input {width:100%;}
    .submitItem {text-align:center;}
    .submitItem input {margin:0;}
    #login2 p  {font-size:0.9em;}
}