html {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7589ce+0,c0ffdc+100 */
background: rgb(117,137,206); /* Old browsers */
background: -moz-linear-gradient(top, rgba(117,137,206,1) 0%, rgba(192,255,220,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(117,137,206,1) 0%,rgba(192,255,220,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(117,137,206,1) 0%,rgba(192,255,220,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7589ce', endColorstr='#c0ffdc',GradientType=0 ); /* IE6-9 */
position: fixed;
width: 100%;
height: 100%;
}
body {
font-family: Arial;
color: white;
margin: 0;
}
.split {
height: 100%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.centered img {
width: 150px;
border-radius: 50%;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid rgb(139, 186, 212);
box-sizing: border-box;
color: #000000;
border-radius: 5px;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
width: 700px;
margin: auto;
}
.login {
width:100%;
float:left;
background:#fff;
border-radius:8px;
padding:40px;
margin-top:15%;
}
.left {
width:50%;
float:left;
}
.right {
width:50%;
float:right;
}
.user-img{
box-shadow:1px 7px 11px 4px #d0c1c1;
width:200px;
height:200px;
border-radius:50%;
padding:20px;
background:#f5f5f5;
text-align:center;
margin-top:20px;
}
.user-img img {
height:170px;
margin-top:20px;
}
.card-container.card {
max-width: 300px;
padding: 25px 40px;
}
.btn {
font-weight: 700;
height: 36px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: default;
}
.card {
background-color: rgba(255, 255, 255, 0);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.reauth-email {
display: block;
color: #404040;
line-height: 2;
margin-bottom: 10px;
font-size: 14px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin #inputEmail,
.form-signin #inputPassword {
direction: ltr;
height: 44px;
font-size: 16px;
}
.form-signin input[type=email],
.form-signin input[type=password],
.form-signin input[type=text],
.form-signin button {
width: 100%;
display: block;
margin-bottom: 10px;
z-index: 1;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .form-control:focus {
border-color: rgb(104, 145, 162);
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgb(104, 145, 162);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgb(104, 145, 162);
}
.btn.btn-signin {
padding: 0px;
font-weight: 700;
font-size: 14px;
height: 36px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
-o-transition: all 0.218s;
-moz-transition: all 0.218s;
-webkit-transition: all 0.218s;
transition: all 0.218s;
}
.btn.btn-signin:hover,
.btn.btn-signin:active,
.btn.btn-signin:focus {
background-color: rgb(20, 148, 52);
}
.forgot-password {
color: rgb(104, 145, 162);
text-decoration:none;
}
.forgot-password:hover,
.forgot-password:active,
.forgot-password:focus {
color: rgb(12, 97, 33);
text-decoration:none;
}
h1 {
color: #101c50;
}
.validation-summary-errors ul {
padding: 0
}
.validation-summary-errors ul li {
list-style:none;
font-size:12px;
color:#f81818;
}
@media (max-width:1050px) {
.left {
width:50%
}
.right {
width: 50%
}
body {
width: 100%
}
.card {
margin-left:-50px
}
.card {
width:100%;
}
}
@media (max-width:1125px) {
.left {
width:60%
}
.right {
width: 40%
}
body {
width: 100%
}
.card {
margin-left:-50px
}
.card {
width:100%;
}
}
@media (max-width:900px) {
.left {
width:60%
}
.right {
width: 40%
}
body {
width: 100%
}
.card {
margin-left:-80px
}
.card {
margin-bottom: 20px;
}
.card {
width:98%;
}
}
@media (max-width:855px) {
.left {
width:60%
}
.right {
width: 40%
}
body {
width: 100%
}
.card {
margin-left:-80px
}
.card {
margin-bottom: 20px;
}
.card {
width:98%;
}
}
@media (max-width:800px) {
.left {
width: 0%
}
.right {
width: 100%
}
body {
width: 100%
}
.card {
margin-left:130px
}
.card {
margin-bottom: 20px;
}
}
@media (max-width:700px) {
.left {
width: 0%
}
.right {
width: 100%
}
body {
width: 100%
}
.card {
margin-left:60px
}
.card {
margin-bottom: 20px;
}
}
@media (max-width:500px) {
.left {
width: 0%
}
.right {
width: 100%
}
body {
width: 100%
}
.card {
margin-right:60px
}
}
@media (max-width:550px) {
.left {
width: 0%
}
.right {
width: 100%
}
body {
width: 100%
}
.card {
margin-right:200px
}
}
@media (max-width:600px) {
.left {
width: 0%
}
.right {
width: 100%
}
.card {
margin-left: 0px;
}
.card {
margin-bottom: 20px;
}
}
@media (max-width:500px) {
.left {
width: 0%
}
.right {
width: 100%
}
body {
width: 100%
}
.card {
margin-left:-70px
}
.card {
margin-right:50px
}
.card {
margin-bottom: 20px;
}
}
@media (max-width:400px) {
.left {
width: 0%
}
.right {
width: 100%
}
body {
width: 100%
}
.card {
margin-left: -75px
}
.card {
margin-right: 120px
}
.card {
margin-bottom: 20px;
}
}
@media (max-width:320px) {
.left {
width: 0%
}
.right {
width: 100%
}
body {
width: 100%
}
.card {
margin-right:-50px
}
.card {
margin-left: -80px
}
.card {
margin-bottom: 20px
}
}
@media (max-width:767px) {
.container {
width:90%;
}
.left {
width: 100%;
}
.login {
padding: 20px;
width:90%;
margin-top: 5%;
}
.user-img {
width:130px;
height: 130px;
margin: 0 auto 30px;
}
.user-img img {
height:100px;
margin-top: 14px;
}
.right {
text-align: center;
}
.right form {
text-align: left;
}
}