* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
}

#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Raleway;
     border: 1px solid #ddd;
  /*width: 70%;*/
  min-width: 300px;
}
.regFromData{
	 padding: 40px;
}
h1 {
  text-align: center;  
}

input[type="text"],input[type="email"],select{
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}textarea {
  padding: 15px;
  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: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */

.steps {
    list-style: none;
    width: 100%;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
}
.steps li.current {
    color: #000;
}
.steps li {
    font-size: 24px;
    float: left;
       position: relative;
    color: #b0b1b3;
}

.steps li span {
    font-size: 11px;
    display: block;    position: relative;
}
.steps li span a:before{
    content: " ";
    display: block;
    width: 0;
    /* height: 0; */
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 30px solid #ddd;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    margin-left: 1px;
    left: 100%;
    z-index: 1;
 
}
.steps li span a:after 
  {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    /* border-top: 50px solid transparent; */
    border-bottom: 50px solid transparent;
    border-left: 30px solid #f5f5f5;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 100%;
    z-index: 2;
	
}


/* Mark the steps that are finished and valid: */
.step.finish {
      border-color: #b1dfbb !important;
    color: #fff !important;
    background: #b1dfbb !important;
}
.step.active {
  border-color: #5cb85c !important;
    color: #fff !important;
    background: #5cb85c !important;
}

.step.finish >  :after {
    border-left: 30px solid #b1dfbb !important;
}
.step.active > :after {
    border-left: 30px solid #5cb85c !important;
}
#steps {
    list-style: none;
    width: 100%;
    
    margin: 0px;
    padding: 0px;
}

#steps li {
    font-size: 24px;
    float: left;
  
    color: #b0b1b3;position: relative;
}

#steps  li span:before{
    content: " ";
    display: block;
    width: 0;
    /* height: 0; */
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 30px solid #ddd;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    margin-left: 1px;
    left: 100%;
    z-index: 1;
}
#steps li span:after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 30px solid #f5f5f5;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 100%;
    z-index: 2;
}


#steps li span {
    font-size: 11px;
    display: block;
	 position: relative;
	     padding: 15px 55px 15px 55px; ; 
    
}
#steps li span a{
    font-size: 11px;
    display: block;
	 position: relative;
}
.sm{
	text-align:center; ;margin-bottom:2%;border: 0;
    border-bottom: 1px solid #ddd;
    padding: 0px;
    background: #f5f5f5;
    border-radius: 0;
    border-top-right-radius: 5px;
    list-style: none;
overflow: hidden;}

.heading{
font-size:18px;
font-weight:bold;
text-align:center;	
}