/*    Page: locked screen*/
/* We will put the dynamically generated digital clock here */
.lockscreen .headline {
  color: #fff;
  text-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
  font-weight: 300;
  -webkit-font-smoothing: antialiased !important;
  opacity: 0.8;
  margin: 0px 0 0px 0;
  font-size: 75px;
  line-height:75px;
}

/* User name [optional] */
.lockscreen .lockscreen-name {
  text-align: center;
  font-weight: 600;
  font-size: 16px;
}
/* Will contain the image and the sign in form */
.lockscreen-item {
  padding: 0;
  background: #fff;
  position: relative;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  margin: 10px auto;
  width: 290px;
}
.lockscreen-item:before,.lockscreen-item:after {  display: table;  content: " ";}
.lockscreen-item:after {  clear: both;}

/* User image */
.lockscreen-item > .lockscreen-image {
  position: absolute;
  left: -17px;
  top: -10px;
  background: #fff;
  padding: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: 10;
}

.lockscreen-item > .lockscreen-image > img {
  width: 70px;
  height: 70px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

/* Contains the password input and the login button */
.lockscreen-item > .lockscreen-credentials {  margin-left: 80px;}
.lockscreen-item > .lockscreen-credentials input {  border: 0 !important;}
.lockscreen-item > .lockscreen-credentials .btn {  background-color: #fff;  border: 0;}

/* Extra to give the user an option to navigate the website [optional]*/
.lockscreen-link {
  margin-top: 30px;
  text-align: center;
}