.giristamam {
  left:0;
  top:0;
  width:100%;
  height:100%;
  position:fixed;
  opacity: 0.9;
  background-color: #211212;
  background-image: url("../../extras/login-back.png");
  z-index:9999;
  background-repeat:no-repeat;
  background-size:cover;
  }

.girishata {
  text-align:center;
  top:0;
  bottom:50px;
  color:red;
  width:100%;
  height:100%;
  position:fixed;

  }

.girisloader {
  position:absolute;
  padding: 5%;
  top:30%;
  width: 90%;
  z-index:3;
  color:white;
  text-align:center;
  font-size:30px;
  font-family:Arial;
  }

/* The Modal (background) */
.modal {
  display: none; 
  position: fixed; 
  z-index: 999;
   left: 0;top: 0;width: 100%; 
   height: 100%; 
   overflow: auto; 
    width: 100%;
    height: 100%;
    overflow: auto;
    background-image: url(../images/backpattern.jpg);
    background-size: cover;

   }




/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}

/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}


#regForm {background-color: #ffffff;margin: 100px auto;font-family: Raleway;/* padding: 20px; */width: 70%;min-width: 300px;}



/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
display: none;
}

button {background-color: #ca0014;color: #ffffff;border: none;padding: 10px 0px;font-size: 17px;font-family: Arial;cursor: pointer;width: 90%;margin: 5%;/* text-align: center; */border-radius: 10px;}

button:hover {
opacity: 0.8;
}

#prevBtn {
background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;  
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}

.step.active {
opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #4CAF50;
}


@media only screen and (max-width: 800px) {

/* The Modal (background) */
.modal {transition: all .2s ease-in-out;display: none; /* Hidden by default */position: fixed; /* Stay in place */z-index: 999; /* Sit on top *//* padding-top: 100px; */ /* Location of the box */left: 0;top: 0;width: 100%; /* Full width */height: 100%; /* Full height */overflow: auto; /* Enable scroll if needed */background-image: url("../images/backpattern.jpg");background-size: cover;}

/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}

/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}



#regForm {
    background-image: url("../images/backpattern2.jpg");
    background-size: cover;
    margin: auto;
    font-family: Raleway;
    /* padding: 20px; */
    width: 100%;
    min-width: 300px;
    height: 100%;
    /* border-radius: 20px; */
    }

h1 {
text-align: center;  
}

input {
padding: 10px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
display: none;
}

button {background-color: #ca0014;color: #ffffff;border: none;padding: 10px 0px;font-size: 17px;font-family: Arial;cursor: pointer;width: 90%;margin: 5%;/* text-align: center; */border-radius: 10px;}

button:hover {
opacity: 0.8;
}

#prevBtn {
background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;  
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}

.step.active {
opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #4CAF50;
}

}