.wrapper-for-bubble {
  background: #50a3a2;
  /* background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%); */
  background: -webkit-linear-gradient(top left, #094fa3 0%, #2589df 100%);
  background: linear-gradient(to bottom right, #094fa3 0%, #2589df 100%);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}



.bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:1;
}
.bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  bottom: -160px;
  -webkit-animation: square 25s infinite;
  animation: square 25s infinite;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
  left: 10%;
}
.bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
  left: 25%;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  -webkit-animation-duration: 22s;
          animation-duration: 22s;
  background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
  left: 70%;
}
.bg-bubbles li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.bg-bubbles li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  -webkit-animation-delay: 8s;
          animation-delay: 8s;
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
}
.bg-bubbles li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  -webkit-animation-delay: 9s;
          animation-delay: 9s;
  -webkit-animation-duration: 25s;
          animation-duration: 25s;
  background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
  left: 90%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 11s;
          animation-delay: 11s;
}
@-webkit-keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-1200px) rotate(600deg);
            transform: translateY(-1200px) rotate(600deg);
  }
}
@keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-1200px) rotate(600deg);
            transform: translateY(-1200px) rotate(600deg);
  }
}
.login-main-left {
    margin: auto;
    max-width: 600px;
	z-index:2;
	position:relative;
}


/*---- FORGET PASSWORD NEW CSS STARTS------*/

.loginform-title{ font-size:24px; color:#333; margin:10px auto;}
.loginform-subtitle{ font-size:21px; color:#888; text-transform:uppercase; margin-bottom:15px;}

.forgetpass-form-area{
max-width:450px;
width:100%;
margin:auto;
margin-top: 25px;
}

.arrow-steps {
	display: flex;
	margin-bottom:15px;
}

.arrow-steps .step {
	font-size: 14px;
	text-align: center;
	color: #666;
	margin: 0 6px 0 0;
	padding: 8px 5px 7px 20px;
	min-width: 85px;
	width:30%;
	text-decoration:none !important;
	position: relative;
	background-color: #dedede;
  transition: background-color 0.2s ease;
}

.arrow-steps .step:after,
.arrow-steps .step:before {
	content: " ";
	position: absolute;
	top: 0;
	right: -17px;
	width: 0;
	height: 0;
	border-top: 19px solid transparent;
	border-bottom: 17px solid transparent;
	border-left: 17px solid #dedede;	
	z-index: 2;
  transition: border-color 0.2s ease;
}

.arrow-steps .step:before {
	right: auto;
	left: 0;
	border-left: 17px solid #fff;	
	z-index: 0;
}

.arrow-steps .step:first-child:before {
	border: none;
}

.arrow-steps .step:first-child {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}


.arrow-steps .step.current {
	color: #fff;
	background-color: #0050a7;
}

.arrow-steps .step.current:after {
	border-left: 17px solid #0050a7;	
}

.arrow-steps .step.previous {
	color: #fff;
	background-color: #28a745;
}

.arrow-steps .step.previous:after {
	border-left: 17px solid #28a745;	
}

.or-design{
	font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    background: #eee;
    width: 35px;
    height: 35px;
    display: inline-block;
    margin: auto;
    text-align: center;
    line-height: 35px;
    border-radius: 50%;
    color: #666;
    margin-bottom: 5px;
	margin-top:-5px;
	}

/*---- FORGET PASSWORD NEW CSS ENDS------*/

.register-form-area{
margin-top: 25px;
}
.register-form-area fieldset label{
margin-bottom: 0px;
}
.red-star{color:#FF3300}

#user_login_form label, #superadminloginform label{margin-bottom:2px;}

.required::after{
	color: #d00;
    content: "*";
    margin-left: 2px;
}
#user_login_form .form-control, #superadminloginform .form-control {border-color:#7a7a7a;}
.login-main-wrapper{width:100%; max-width:600px; margin:auto; z-index:2; position:relative;}
.input-icons .icon { 
	padding: 11px;
	position: absolute;
	    border-right: 1px solid #7a7a7a;
		width:36px;
} 
  
.input-icons  .form-control { 
	width: 100%;
	text-align: left; 
	padding-left: 50px;
}