* {
   box-sizing: border-box;
}

*:focus {
   outline: none;
}

body {
   font-family:      Arial, Helvetica, Sans-Serif;
   background-color: #808080;
   padding:          10px;
}  
   
.login {
   margin:   20px auto;
   width:    280px;
}

.app-title {
   text-align:               center;
   color:                    #ffffff;
   background-color:         #4970b7;
   padding:                  10px;
   font-size:                1.5em;
   letter-spacing:           0.1em;
   font-weight:              normal;
   color:                    #ffffff;
   border-top-left-radius:   12px;
   border-top-right-radius:  12px;
}

.login-screen {
   background-color:            #ffffff;
   padding:                     20px;
   border-bottom-left-radius:   12px;
   border-bottom-right-radius:  12px;
}  
   
.login-form {
   text-align:  center;
}  
   
.control-group {
   margin-bottom:  10px;
}  
   
input {
   text-align:        center;
   background-color:  #ECF0F1;
   border:            2px solid transparent;
   border-radius:     3px;
   font-size:         16px;
   font-weight:       200;
   padding:           10px 0;
   width:             230px;
   transition:        border .5s;
}

input:focus {
   border:      2px solid #4970b7;
   box-shadow:  none;
}

.btn {
   border:           2px solid transparent;
   background-color: #5980c7;
   color:            #ffffff;
   font-size:        16px;
   line-height:      25px;
   padding:          10px 0;
   text-decoration:  none;
   text-shadow:      none;
   border-radius:    3px;
   box-shadow:       none;
   transition:       0.25s;
   display:          block;
   width:            230px;
   margin:           0 auto;
}

.btn:hover {
   background-color:  #4970b7;
}

.status-msg {
   color:       #ff0000;
   margin-top:  10px;
}