html, body {
height: 100%;
}
body {
-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(bg.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 0;
height: 100%;
width: 100%;
font-family: 'Noto Kufi Arabic', sans-serif; 
font-weight:bold;
color:#fff;
text-shadow: 0 0 3px #000;
}
body a, body a:hover, body a:active{
text-decoration:none;
color:#ffd700;
}
.logo{
display:block;
width: 80px!important;
height: 80px!important;
max-width: 80px!important;
max-height: 80px!important;
background-image: url(logo.png);
background-color: #ffd700;
background-size: 100%;
background-size: cover;
border-radius: 10px;
vertical-align: middle;
margin:0 auto;
}
.form-signin {
width: 100%;
max-width: 270px;
padding: 2px;
margin: auto;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
margin-bottom: 10px;
font-size: 16px;
border:2px solid #000;
background-image: none;
outline: 0;
box-shadow: none;
}
.error{
color:#ff0000;
}
.btn, .btn:active,.btn:focus,.btn:focus:active{
background:#000;color:#ffd700;
background-image: none;
outline: 0;
box-shadow: none;
}
.btn:hover {
background:#000;color:#fff;
background-image: none;
outline: 0;
box-shadow: none;
}
.position{
position: absolute;bottom: 10px;right: 0;left:0
}
.letter-spacing{
letter-spacing: 3px;
}