*{
  font: "poppinsregular" !important;
  font-size: 16px !important;
  
  font-family: poppinsregular !important;
 }

 .header{
  width: 100%;
  height: 100px;
  display: block;
  background-color: #ffffff;
  position: sticky;
  top: 0px;
}

.inner-header{
  width:90%;
  height: 100%;
  display: block;
  margin: 0 auto;
}

.logo-container-vedanta{
  height: 100%;
  float: left;
  display: block;
  position: absolute;
}

.logo-container-hzl{
  height: 100%;
  float: right;

}

body{
  margin:0;
  background-image: url("../images/login_page_background.jpg");
  text-decoration: none;
  height: 95vh;
}

/* Bordered form */
form {
   
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255, 0.5);  
  box-sizing: border-box;
  border-radius: 10px;
	

}

/* Full-width inputs */
input[type=text], input[type=password], input[type=email]{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
button {
  background-color: #064ba9;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

/* Add a hover effect for buttons */
button:hover {
  opacity: 0.8;
}

.reg{
  float: left;
}

.psw{
  float: right;
}

/* The message box is shown when the user clicks on the password field */
#message {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 20px;
  margin-top: 10px;
}

#message p {
  padding: 10px 35px;
  font-size: 18px;
}

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

.valid:before {
  position: relative;
  left: -35px;
  content: ".";
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -35px;
  content: ".";
}


/* All Smartphones in portrait and landscape ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* YOUR STYLE GOES HERE */
.header{
  width: 100%;
}
form {
  width: 330px;
  padding-top: inherit;
  position: fixed;
}

.register-container, .login-container, .resetPass-panel{
  padding-top: 10%;
}

.googleplay {
  width: 375px;
}

.login-panel{
    top : 50%
}
}

/* All Smartphones in landscape ----------- */
@media only screen 
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
}

/* All Smartphones in portrait ----------- */
@media only screen 
and (max-width : 479px) {
/* YOUR STYLE GOES HERE */
}

/***** ANDROID DEVICES *****/

/* Android 240 X 320 ----------- */
@media only screen
and (max-width: 241px){
/* YOUR STYLE GOES HERE */
}

/* Android(Samsung Galaxy) in portrait 380 X 685 ----------- */
@media only screen
and (min-width: 375px)
and (max-width: 385px){
/* YOUR STYLE GOES HERE */
.header{
  width: 100%;
}
form {
  width: 330px;
  padding-top: inherit  ;
  top: 60%;
  position: fixed;
}
}

/* Android(Samsung Galaxy) in Landscape 685 X  380 ----------- */
@media only screen
and (min-width: 680px)
and (max-width: 690px){
/* YOUR STYLE GOES HERE */
}

/* Kindle Portrait 600 X 1024 ----------- */
@media only screen
and (min-width: 595px)
and (max-width: 610px){
/* YOUR STYLE GOES HERE */
}

/* Kindle Landscape 1024 X 600 ----------- */
@media only screen
and (min-width: 1000px)
and (max-width: 1030px){
/* YOUR STYLE GOES HERE */
}

/***** ALL GENERATION IPADS *****/

/* iPads in portrait and landscape----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* YOUR STYLE GOES HERE */  
}

/* iPad in landscape----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* YOUR STYLE GOES HERE */
}

/* iPad in portrait----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait){
/* YOUR STYLE GOES HERE */
}

/***** Retina IPAD 3 & 4*****/

/* Retina iPad 3 & 4 in portrait and landscape----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}

/* Retina iPad 3 & 4 in landscape----------- */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}

/* Retina iPad 3 & 4 in landscape----------- */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}

/***** IPAD 1 & 2 (ALSO IPAD MINI)*****/

/* iPad 1 & 2 in portrait and landscape ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}

/* iPad 1 & 2 in landscape ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  {
/* YOUR STYLE GOES HERE */
}

/* iPad 1 & 2 in portrait ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* YOUR STYLE GOES HERE */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* YOUR STYLE GOES HERE */
}

/* Only iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* YOUR STYLE GOES HERE */
form {
  width: 330px;
  padding-top: inherit;
  top: 60%;
  position: fixed;
}
}

/* Only iPhone 5 ----------- */
/* iPhone 5 (portrait) */
@media screen and (max-device-width: 380px) and (orientation: portrait) {
  form {
    width: 330px;
    padding-top: inherit;
    top: 60%;
    position: fixed;
  }

}

/* iPhone 5 (landscape) */
@media screen and (max-device-width: 568px) and (orientation: landscape) {

}

/*------------------------------------------------------------------------------------------------ */