<style>

html{
background: rgb(179,182,183);
background: linear-gradient(25deg, rgba(179,182,183,1) 0%, rgba(53,74,94,1) 71%);
}

body {    
background: rgb(179,182,183);
background: linear-gradient(25deg, rgba(179,182,183,1) 0%, rgba(53,74,94,1) 71%);
margin: 0;
flex: 0 1 auto;
align-self: auto;
/*recommend 1920 / 1080 max based on usage stats, use 100% to that point*/
width: 100%
max-width: 900px;
height: 100%;
max-height: 600px;
text-align:center;
}

* {
box-sizing: border-box;
}

.container {
padding: 10px;
background-color: transparent;
border-radius: 12px;
  width: 420px;
height:550px;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}


input { 
width: 100%; 
margin-bottom: 10px; 
background: rgba(0,0,0,0.3);
border: none;
outline: none;
padding: 10px;
font-size: 20px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
-webkit-transition: box-shadow .5s ease;
-moz-transition: box-shadow .5s ease;
-o-transition: box-shadow .5s ease;
-ms-transition: box-shadow .5s ease;
transition: box-shadow .5s ease;
}
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }

.btn {
background: rgb(179,182,183);
background: linear-gradient(25deg, rgba(179,182,183,1) 0%, rgba(44,61,78,1) 1%);
color: white;
padding: 10px 12px;
border: none;
cursor: pointer;
width: 100%;
height:50px;
opacity: 0.9;
font: bold 24px Arial, Helvetica, sans-serif;
border-radius: 4px;
box-shadow: 0px 10px 12px #00000042;
}

.btn:hover {
opacity: 1;
  box-shadow: 0px 12px 14px #00000091;
}

.imgtxt{
height:50%;
width:100%;
text-align:center;
padding:60px;
padding-top:0px;
font:bold 34px Arial, Helvetica, sans-serif;
color:black;
opacity: 0.6;
background-image: url(../images/signin/st_mark.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 8px;
box-shadow: 0px 10px 12px #00000042;
}

error{
font:16px Arial, Helvetica, sans-serif;
text-align:center;
color:#c0392b;
}


pt{
margin:20px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 55px;
letter-spacing: 1.8px;
word-spacing: 3px;
color: #DCDCDC;
font-weight: bold;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
}

ds{
font-family: Tahoma, Geneva, sans-serif;
font-size: 20px;
letter-spacing: 1.8px;
word-spacing: 3px;
color: #DCDCDC;
font-weight: bold;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
padding:20px;
}

ft{
font: 20px arial, sans-serif;
color: white;
}



/* The message box is shown when the user clicks on the password field */
.validation {
display:none;
text-align:left;
font: 18px arial, sans-serif;
line-height:1.5px;
width:100%;
padding:20px;
}


/* Add a green text color and a checkmark when the requirements are right */
.valid {
color: #336600;
padding:11px;
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
color: #7b241c;
padding:11px;
}

.validationtitle{
font: 16px arial, sans-serif;
color: white;
margin-bottom:15px;
}


.for-support{
color: white;
font: 18px Arial, Helvetica, sans-serif; 
width: 420px;
line-height: 30px;
}

</style>
