html,body{
  background: #cce4ea;
  height: 100%;
}
:root{
  --google: #d74a37;
  --facebook: #38539b;
  --twitter: #00a7e7;
}
.logo{
  position: absolute;
  top: -112px;
  left: 50%;
  margin-right: -50%;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  background-color: #0066cc;
  border-radius: 50%;
  border: 0.75rem solid #cce4ea;
}
.container{
  height: 100%;
  align-content: center;
}

.card{
  margin-top: auto;
  margin-bottom: auto;
  width: 400px;
  background-color: #ffffff !important;
}
.card-header{
  background-color: #ffffff;
  border: none;
}

.fa-facebook-square{
  color: var(--facebook);
}
.fa-google-plus-square{
  color: var(--google);
}
.fa-twitter-square{
  color: var(--twitter)
}
.social_icon span{
  font-size: 45px;
  margin-left: 10px;
  cursor: pointer;
}

.card-header h3{
  color: white;
}

.social_icon{
  position: absolute;
  right: 20px;
  top: 61px;
}

.input-group-prepend span{
  background-color: #ddd;
  color: #858585;
  border:0 !important;
}
input:disabled[type="submit"]{
  background-color: #ddd;
  color: #858585;
  cursor:not-allowed;
}
input:focus{
  outline: 0 0 0 0  !important;
  box-shadow: 0 0 0 0 !important;
}

.remember{
  color: #333;
}

.remember input{
  width: 20px;
  height: 20px;
  margin-left: 15px;
  margin-right: 5px;
  margin-top: 3px;
}

.login_btn{
  color: #fff;
  background-color: #0066cc;
  width: 100px;
}

.login_btn:hover{
  color: #fff;
  background-color: #0467b7;
}

.links{
  color: #333;
}

.links a{
  margin-left: 4px;
}