Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="fix-rel" style="z-index:5;">
    <nav class="navbar navbar-default navbar-custom ">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle icon" data-toggle="collapse" data-target="#myNavbar">
                    <span class="inner-icon">
                        <span class="bar1"></span>
                        <span class="bar2"></span>
                        <span class="bar3"></span>
                    </span>
                </button>
                <a class="navbar-brand" href="#">INet Restaurant </a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <div class="flex-container">
                    <div class="flex-main" style="">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="index.html">
                                    <span class="glyphicon glyphicon-home"></span> Home</a></li>
                            <li><a href="aboutus.html">About Us</a></li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <span class="glyphicon glyphicon-envelope"></span>
                                    <span class="glyphicon glyphicon-earphone"></span> Contact Us <span class="caret"></span></a>
                                <ul class="dropdown-menu dropdown-menu1">
                                    <li><a href="contactus.html">On our site</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">On Facebook</a></li>
                                    <li><a href="#">On Twitter</a></li>
                                </ul>
                            </li>
                            <li><a href="table.html">Table</a></li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <span class="glyphicon glyphicon-menu-hamburger"></span> Menu <span class="caret"></span></a>
                                <ul class="dropdown-menu dropdown-menu2">
                                    <li class="dropdown-header "></li>
                                    <li><a href="table.html"> Table</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="./maincourse/pizza.html"> Pizza</a></li>
                                    <li><a href="./maincourse/pasta.html"> Pasta</a></li>
                                    <li class=" main1"><a href="./maincourse/lazagna.html"> Lasagna</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="./options/appetizer.html"> Appetizers</a></li>
                                    <li><a href="./options/sallad.html"> Sallads</a></li>
                                    <li><a href="./options/dessert.html">Desserts</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="./drinks/alcoholicdrink.html"> Alcoholic Drinks</a></li>
                                    <li><a href="./drinks/nonalcoholicdrink.html"> Non Alcoholic Drinks</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="lunchbuffet.html"> Lunch Buffet</a></li>
                                    <li><a href="weekendbrunch.html"> Weekend Brunch</a></li>
                                </ul>
                            </li>
                            <li><a href="order.html">Order</a></li>
                            <li><a href="news.html">News</a></li>
                        </ul>
                    </div>
                    <div class="flex-side" style="">
                        <ul class="nav navbar-nav navbar-right navbar-navside1">
                            <li><a href="registration2.html"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                            <li><a href="#myModal" id="myBtn"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</div>

<div class="container-fluid" style="z-index:2;">
    <div class="jumbotron jumbo toppadding" style="z-index:1;">
        <a href="#">
            <h2 class="center1">INET Restaurant</h2>
        </a>
        
        <p class="center1">Bootstrap is the most popular HTML, CSS, and JS framework for
            developing responsive, mobile-first projects on the web.</p>
        <p class="center1">The home of the INET Restaurant</p>
        <p class="center1">Registration</p>
        
    </div>
    
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
            <div class="row main-content">
                
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="panel panel-default headcustomsd bodycustomsd">
                        <div class="panel-heading ">
                            <h1>Registration Form</h1>
                        </div>
                        <div class="panel-body">
                            <div class="bs-example">
                              <!--  
                                <form class="form-horizontal register registration" 
                                action="/examples/actions/confirmation.php" method="post" style="z-index:1;"> -->
                                <form class="form-horizontal register registration">
                                    <div class="form-group">
                                        <label class="control-label col-sm-3" for="fname">
                                            <span id="fnameRequired" class="glyphicon glyphicon-star starrq"></span> First Name :</label>
                                        <div class="col-sm-9">
                                            <div class="input-group inputGr">
                                                <span class="input-group-addon glyph3 fst-name-glyph inputHdr">
                                                    <i class="glyphicon glyphicon-user"></i></span>
                                                <input type="text" class="form-control check inputbgr_reg fst-name-field" id="fname" placeholder="Enter First Name" name="First Name">
                                            </div>
                                            <div class="inputstatus">
                                                <span class="error">Please enter your First name</span>
                                                <span class="feedback"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-3" for="lastName3">
                                            <span id="lnameRequired" class="glyphicon glyphicon-star starrq"></span> Last Name :</label>
                                        <div class="col-sm-9">
                                            <div class="input-group">
                                                <span class="input-group-addon glyph3 lst-name-glyph">
                                                    <i class="glyphicon glyphicon-user"></i></span>
                                                <input type="text" class="form-control check inputbgr_reg lst-name-field" id="lastName3" placeholder="Enter Last Name" name="Last Name">
                                            </div>
                                            <div class="inputstatus">
                                                <span class="error">Please enter your last or family name.</span>
                                                <span class="feedback"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-3" for="email3">
                                            <span id="emailRequired" class="glyphicon glyphicon-star starrq"></span> Email Address :</label>
                                        <div class="col-sm-9">
                                            <div class="input-group">
                                                <span class="input-group-addon glyph3 email-glyph">
                                                
                                                    <i class="fa fa-envelope-o" aria-hidden="true"></i>
                                                </span>
                                                
                                                <input id="email3" type="email" class="form-control check inputbgr_reg email-field" name="E-mail" placeholder="E-mail">
                                            </div>
                                            <div class="inputstatus">
                                                <span class="error">Please enter your E-mail.</span>
                                                <span class="feedback"></span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label class="control-label col-sm-3" for="phoneNumber3">
                                            <span id="phoneRequired" class="glyphicon glyphicon-star starrq"></span> Phone Number :</label>
                                        <div class="col-sm-9">
                                            <div class="input-group">
                                                <span class="input-group-addon glyph3 phone-glyph">
                                                
                                                    <i class="fa fa-phone" aria-hidden="true"></i>
                                                </span>
                                                
                                                <input type="tel" class="form-control check inputbgr_reg phone-field" 
                                                       id="phoneNumber3" placeholder="Phone Number" name="Phone Number">
                                            </div>
                                            <div class="inputstatus">
                                                <span class="error">Please enter your phone number.</span>
                                                <span class="feedback"></span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <!--    <label class="control-label col-sm-3" for="areacode3 telnum3">Contact Tel. :</label> -->
                                        <label class="control-label col-sm-3" for="areacode3">Contact Tel. :</label>
                                            <div class="col-sm-9">
                                                
                                                <div class="input-group group-3">
                                                    <span class="input-group-addon glyph3 phone2-glyph">
                                                      <i class="fa fa-phone widthHeader" aria-hidden="true"></i>
                                                    </span>
                                                    <input id="areacode3" type="tel" name="areacode" class="form-control inputbgr_reg phone2-field" placeholder="Area code">

                                                    <input id="telnum3" type="tel" name="phone" class="form-control inputbgr_reg phone2-field" placeholder="Phone number">
                                                </div>
                                                
                                            </div>
                                        <div class="col-xs-12 col-sm-12">
                                            <!--    <div class="control-label col-xs-3" for="telnum3">&nbsp;</div>-->
                                            <div class="control-label col-xs-3">&nbsp;</div>
                                            <div class="col-xs-12 col-sm-9">
                                                <div class="help-block with-errors texttel1" style="width:34%;float:left;">Please enter your areacode</div>
                                                <div class="help-block with-errors texttel1" style="width:60%;float:left;">Please enter your phone</div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label class="control-label col-sm-3" for="postalAddress">
                                            <span id="postalRequired" class="glyphicon glyphicon-star starrq"></span> Postal Address :</label>
                                        <div class="col-sm-9">
                                            <div class="input-group">
                                                <span class="input-group-addon glyph3 address-glyph">Postal :</span>
                                                <textarea rows="3" class="form-control check inputbgr_reg address-field" 
                                                          id="postalAddress" name="Postal Address" placeholder="Postal Address"></textarea>
                                            </div>
                                            <div class="inputstatus">
                                                <span class="error">Please enter your postal address.</span>
                                                <span class="feedback"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-3" for="ZipCode3">
                                            <span id="zipRequired" class="glyphicon glyphicon-star starrq"></span> Zip Code :</label>
                                        <div class="col-sm-9">
                                            <div class="input-group">
                                                <span class="input-group-addon glyph3 zip-glyph">zip code</span>
                                                <input type="text" class="form-control check inputbgr_reg zip-field" id="ZipCode3" name="zip code" placeholder="Zip Code">
                                                
                                            </div>
                                            <div class="inputstatus">
                                                <span class="error">Please enter your ZIP code.</span>
                                                <span class="feedback"></span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label class="control-label col-sm-3" for="your-city">
                                            <span id="cityRequired" class="glyphicon glyphicon-star starrq"></span> City:</label>
                                                <div class="col-sm-9">
                                                    <div class="input-group">
                                                        <span class="input-group-addon glyph3 city-glyph">City</span>
                                                        <div data-toggle="collapse" data-target="#demo2">
                                                            <input type="text" class="form-control check inputbgr_reg city-field" 
                                                                   id="your-city" placeholder="Enter your City" name="Your City">
                                                        </div>
                                                        
                                                    </div>
                                                    <div class="inputstatus">
                                                        <span id="errorid" class="error">Please click on the input field for the list of cities.</span>
                                                        <span id="feedbackid" class="feedback"></span>
                                                    </div>
                                                    <div id="demo2" class="collapse">
                                                        <h4>List of available cities</h4>
                                                        <ul class="list-group citylist">
                                                            <li class="list-group-item">London</li>
                                                            <li class="list-group-item">Cardiff</li>
                                                            <li class="list-group-item">Manchester</li>
                                                            <li class="list-group-item">Brighton</li>
                                                            <li class="list-group-item">Bristol</li>
                                                            <li class="list-group-item">Birmingham</li>
                                                            <li class="list-group-item">Swansea</li>
                                                        </ul>
                                                        <h4>Close: click on input field</h4>
                                                    </div>
                                                    
                                                </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label class="control-label col-sm-3" for="pwd1">
                                            <span id="pwdRequired" class="glyphicon glyphicon-star starrq"></span> Password :</label>
                                        <div class="col-sm-9">
                                            <div class="input-group">
                                                <span class="input-group-addon glyph3 pwd-glyph">
                                                    <i class="fa fa-lock"></i>
                                                </span>
                                                <input id="pwd1" type="text" class="form-control check inputbgr_reg pwd-field" name="Password" placeholder="Enter Password">
                                            </div>
                                            <div class="inputstatus">
                                                <span class="error">Please enter your password.</span>
                                                <span class="feedback"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-3" for="pwdre">
                                            <span id="pwreRequired" class="glyphicon glyphicon-star starrq"></span> Retype Password:</label>
                                        <div class="col-sm-9">
                                            <div class="input-group">
                                                <span class="input-group-addon glyph3 re-glyph">
                                                    <i class="fa fa-lock"></i>
                                                </span>
                                                <input id="pwdre" type="text" class="form-control check inputbgr_reg re-field" name="Retype Password" placeholder="Retype Password">
                                            </div>
                                            <div class="inputstatus">
                                                <span class="error">Please retype your password.</span>
                                                <span class="feedback"></span>
                                            </div>
                                        </div>
                                    </div>
                                                                
                                    <div class="form-group">
                                        <label class="control-label col-sm-3">Please Choose </label>
                                        
                                         <div class="col-sm-9 dropdown">
                                            
                                                <div class="row">
                                                    <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                                                        <div class="btn-group dropdown">
                                                            
                                                            <button type="button" data-toggle="dropdown" 
                                                                    class="btn btn-default buttonchoice dropdown-toggle"> 
                                                                    Lay-out Style <span class="caret"></span></button>
                                                            <ul class="dropdown-menu dropdwn1">
                                                                <li><a href="#">Style-1</a></li>
                                                                <li class="divider"></li>
                                                                <li><a href="#">Style-2</a></li>
                                                                <li><a href="#">Style-3</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                                                        <div class="btn-group dropdown">
                                                            
                                                            <button type="button" data-toggle="dropdown" 
                                                                    class="btn btn-default buttonchoice dropdown-toggle"> Font size<span class="caret"></span></button>
                                                            <ul class="dropdown-menu dropdwn2">
                                                                <li><a href="#">Font size-1</a></li>
                                                                <li class="divider"></li>
                                                                <li><a href="#">Font size-2</a></li>
                                                                <li><a href="#">Font size-3</a></li>
                                                            </ul>
                                                            
                                                        </div>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                                                        <div class="btn-group dropdown">
                                                            
                                                            <button type="button" data-toggle="dropdown" class="btn btn-default buttonchoice dropdown-toggle"> Language <span class="caret"></span></button>
                                                            <ul class="dropdown-menu dropdwn3">
                                                                <li><a href="#">English</a></li>
                                                                <li class="divider"></li>
                                                                <li><a href="#">Hungarian</a></li>
                                                                <li><a href="#">Romanian</a></li>
                                                            </ul>
                                                        </div>
                                                   </div>
                                                   <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                                                        <div class="btn-group dropdown">
                                                            
                                                            <button type="button" data-toggle="dropdown" class="btn btn-default buttonchoice dropdown-toggle"> Font style <span class="caret"></span></button>
                                                            <ul class="dropdown-menu dropdwn1">
                                                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Font style-1</a></li>
                                                                <li role="presentation" class="divider"></li>
                                                                <li><a href="#">Font style-2</a></li>
                                                                <li><a href="#">Font style-3</a></li>
                                                                
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <h5><label class="control-label col-sm-3">How can we contact you ?</label></h5>
                                        
                                        <div class="col-sm-9">
                                            <div class="input-group">
                                                <label class="container">
                                                    <input type="checkbox" checked="checked">
                                                    Phone
                                                </label>
                                                
                                                <label class="container"> 
                                                    <input type="checkbox">
                                                    E-mail
                                                </label>
                                                
                                                <label class="container"> 
                                                    <input type="checkbox">
                                                    Post
                                                </label>
                                                
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label class="control-label col-sm-3">Gender :</label>
                                        <div class="col-sm-3">
                                            <label class="gender radio-inline">
                                                <input type="radio" name="genderRadios" value="male"> Male
                                            </label>
                                        </div>
                                        <div class="col-sm-3">
                                            <label class="gender radio-inline">
                                                <input type="radio" name="genderRadios" value="female"> Female
                                            </label>
                                        </div>
										<div class="col-sm-3">
                                            <label class="gender radio-inline">
                                                <input type="radio" name="genderRadios" value="notDeclared"> 
													Not declared.
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <div class="col-xs-offset-3 col-xs-9">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" value="news">
                                                <span class="error">Send me latest news and updates.</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-xs-offset-3 col-xs-9">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" class="check" id="terms" name="termsConditions" value="agree" > 
                                            		<span id="termcheck" class="error2">I agree to the <a href="#">Terms and Conditions</a>.</span>
													<span id="termsRequired" class="glyphicon glyphicon-star starrq termleft"></span>
                                                    <span class="feedback"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-xs-offset-3 col-xs-9">
                                            <label class="checkbox-inline">
                                                <span class="glyphicon glyphicon-star"></span>
                                                The fields marked with star are required.
                                                
                                            </label>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="form-group">
                                        <div class="col-xs-offset-3 col-xs-9">
                                            <input class="regsmt btn1" type="submit" value="Submit">
                                            <input class="regreset btn2" type="reset" onclick="myFunction()" value="Reset form">
                                        </div>
                                    </div>
                                
                                
                             </form> 
                        </div>   
                        </div>
                        <div class="panel-footer footercustomsd"></div>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
            <!--Nested rows within a column-->
            <div class="row ">
                <div class="col-xs-12 col-sm-6 col-md-12">
                    <div class="sidebar-content">
                        <div class="panel panel-default headcustomsd bodycustomsd">
                            <div class="panel-heading ">
                                <h2>Offer of the Week</h2>
                            </div>
                            
                            <div class="panel-body ">
                                Try our wonderful <span class="red">new</span> Margherita.<br />
                                A better recipe and virtually tastier than ever. <br />
                                Enjoy every byte!
                            </div>
                            
                            <div class="panel-footer footercustomsd"></div>
                        </div>
                        
                    </div>
                </div>
                
                <div class="col-xs-12 col-sm-6 col-md-12">
                    <div class="sidebar-content">
                        <div class="panel panel-default headcustomsd bodycustomsd">
                            <div class="panel-heading">
                                <h2>Social Media</h2>
                            </div>
                            <div class="panel-body">
                               
                                <!-- <div style="width:176px;height:280px;float:left;border:2px solid transparent;"></div>-->
                                
                                    <ul class="nolistmark socialButtons">
                                        <li>
                                                                                        
                                            <a class="button button01" href="#">
                                                <i class="fa fa-facebook i">  
                                                <span class="btnName">Facebook</span></i></a>
                                        </li>
                                        <li>
                                            <!--<button type="button" class="btn btn-tw">-->
                                            
                                            <a class="button button01" href="#">
                                            <i class="fa fa-twitter i">  
                                            <span class="btnName">Twitter</span></i></a>
                                        </li>
                                        <li>
                                            <!--<button type="button" class="btn btn-li">-->
                                            
                                            <a class="button button01" href="#">
                                            <i class="fa fa-linkedin i">  
                                            <span class="btnName">Linkedin</span></i></a>
                                        </li>
                                        <li>
                                            <!--<button type="button" class="btn btn-ins">-->
                                           
                                            <a class="button button01" href="#">
                                            <i class="fa fa-instagram i">  
                                            <span class="btnName">Instagram</span></i></a>

                                        </li>
                                        <li>
                                            
                                            <a class="button button01" href="#">
                                            <i class="fa fa-wordpress i">  
                                            <span class="btnName">Wordpress</span></i></a>
                                        </li>
                                    </ul>
                                
                            </div>
                            <div class="panel-footer footercustomsd"></div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


<div class="row" style="z-index:2;">
    
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 fluid bottompadding">
        
        <div class="sidebar-content bottommargin">
            <div class="panel panel-default headcustomsd bodycustomsd">
                <div class="panel-heading headcustomsd">
                    <h2>Address</h2>
                </div>
                <div class="panel-body bodycustomsd">
                    <address>Virtual Pizza Restaurant Ltd.<br>
                        1, Pizza Avenue<br>
                        Pizza House, London<br>
                        PI1 2ZA<br>
                        Great Britain<br>
                        Tel.: +44 1234 5678<br>
                        Fax: +44 8765 4321<br>
                        Email: info<code>&commat;</code>vpp.com
                    </address>
                </div>
                <div class="panel-footer footercustomsd"></div>
            </div>
            
        </div>
    </div>
</div> <!-- end row -->
</div>
<footer class="row" style="z-index:2;">
    
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 footerdiv">
        <p>2017 &copy; INET Restaurant. All Rights Reserved.</p>
        
    </div>
    <!-- end row -->
</footer>

<!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header headcustom">
            <button type="button btnclose" class="close stylecls" data-dismiss="modal" style="">&times;</button>
            <span class="glyphicon headiconlabelmain glyphicon-user centergl"></span>     
            <h2 class="centerttl"> Restasurant Virtually</h2>    
         
        </div>
        <div class="modal-body backgroundbody">
          
        <!--<div class="container"></div>
        <div class="container"> </div>
             <form class="container-fluid" action="/action_page.php">-->

            
            <form id="login" class="form-horizontal container-fluid modallogin modalform">
                <div class="row">
                    <div class="form-group">
                    <label class="control-label col-sm-3"> </label>
                    <div class="col-sm-9">
                        <h3 class="modal-title headtextlabel2 titleh3">
                        <span class="glyphicon glyphicon-log-in headiconlabel"></span> Log in</h3>
                    </div>
                    </div>
                    
                    <div class="form-group form-groupmodal inputboxmodal1">
                    
                      <label class="control-label textlabel col-sm-3" for="emailm1">
                      <span class="glyphicon iconlabel glyphicon-envelope"></span>  Email :</label>
                      <div class="col-sm-9">
                        <input type="email" class="form-control borderbottom input-check" id="emailm1" placeholder="Enter email" name="E-mail">
                        <!--<span class="glyphicon glyphicon-remove fielderror" style=""></span>-->
                              <div class="inputstatusmodal">
                                    <span class="glyphicon  glyphicon-star star"></span>
                                    <span class="error">Your email</span>
                                    <span class="feedback"></span>
                              </div>
                      </div>
                      
                    </div>
                    <div class="form-group form-groupmodal inputboxmodal1">
                      <label class="control-label textlabel col-sm-3" for="pwdm1">
                      <span class="glyphicon iconlabel glyphicon-lock"></span>  Password :</label>
                      <div class="col-sm-9">          
                        <input type="password" class="form-control borderbottom input-check" id="pwdm1" placeholder="Enter password" name="Password">
                        <!--<span class="glyphicon glyphicon-ok fielderror" style=""></span>-->
                            <div class="inputstatusmodal">
                                <span class="glyphicon  glyphicon-star star"></span>
                                <span class="error">Your password</span>
                                <span class="feedback"></span>
                            </div>
                     </div>
                    </div>
                    <div class="form-group">        
                      <div class="col-sm-offset-3 col-sm-9">
                        <div class="checkbox textlabel">
                          <label><input type="checkbox" name="remember"> Remember me</label>
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
						<div class="col-xs-offset-3 col-xs-9">
							<label class="checkbox-inline textlabel">
								<span class="glyphicon glyphicon-star"> 
								The fields marked with star are required.
								</span>
							</label>
						</div>
					</div>
                    <div class="form-group">        
                      <div class="col-sm-offset-3 col-sm-9">
                        <button type="reset" class="btn btn-default button1 button1color">Reset</button>
                      
                        <button type="submit" class="btn btn-default button1 button1color1">Submit</button>
                        <!--<div class="divchangepw" ></div>-->
                                                
                      </div>
                    </div>
                    <div class="form-group">        
                      <div class="col-sm-offset-3 col-sm-9">
                        
                        <!--<div class="divchangepw" ></div>-->
                        <p class="paragraph othertext">Forgot password ?<a href="#" id="changepsw"> Change password</a></p>
                        
                      </div>
                    </div>
                </div>
            </form>
            
            <!--<form id="changepw" class="form-horizontal container-fluid modalresetpw" action="/action_page.php">-->
            <form id="changepw" class="form-horizontal register container-fluid modalresetpw modalform">
                <div class="row">
                    <div class="form-group">
                    <label class="control-label col-sm-3"> </label>
                    <div class="col-sm-9">
                        <h3 class="modal-title headtextlabel2 titleh3">
                        <span class="glyphicon headiconlabel glyphicon-lock"></span> Change password</h3>
                    </div>
                    </div>
                    <div class="form-group form-groupmodal inputboxmodal2">
                      <label class="control-label textlabel col-sm-3" for="emailm2">
                      <span class="glyphicon iconlabel glyphicon-envelope"></span>  Email :</label>
                      <div class="col-sm-9">
                        <input type="email" class="form-control borderbottom input-check" id="emailm2" placeholder="Enter email" name="E-mail">
                         <div class="inputstatusmodal">
                            <span class="glyphicon  glyphicon-star star"></span>
                            <span class="error">Your email</span>
                            <span class="feedback"></span>
                        </div>   
                      </div>
                      
                    </div>
                    <div class="form-group form-groupmodal inputboxmodal2">
                      <label class="control-label textlabel col-sm-3" for="pwdm2">
                      <span class="glyphicon iconlabel glyphicon-eye-open"></span>  Password :</label>
                      <div class="col-sm-9">          
                        <input type="password" class="form-control borderbottom input-check" id="pwdm2" 
                        placeholder="Type password" name="Password">
                            <div class="inputstatusmodal">
                                 <span class="glyphicon  glyphicon-star star"></span>
                                 <span class="error">Your password</span>
                                 <span class="feedback"></span>
                            </div>
                      </div>
                    </div>
                    <div class="form-group form-groupmodal inputboxmodal2">
                      <label class="control-label textlabel col-sm-3" for="pwdmre2">
                      <span class="glyphicon iconlabel glyphicon-eye-open"></span>  Password Retype :</label>
                      <div class="col-sm-9">          
                        <input type="password" class="form-control borderbottom input-check" id="pwdmre2" 
                        placeholder="Retype password" name="Password Retype">
                            <div class="inputstatusmodal">
                                 <span class="glyphicon  glyphicon-star star"></span>
                                 <span class="error">Your password retype</span>
                                 <span class="feedback"></span>
                            </div>
                      </div>
                    </div>
                    <div class="form-group">        
                      <div class="col-sm-offset-3 col-sm-9">
                        <div class="checkbox textlabel">
                          <label><input type="checkbox" name="remember"> Remember me</label>
                                
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
						<div class="col-xs-offset-3 col-xs-9">
							<label class="checkbox-inline textlabel">
								<span class="glyphicon glyphicon-star"> 
								The fields marked with star are required.
								</span>
							</label>
						</div>
					</div>
                    <div class="form-group">        
                      <div class="col-sm-offset-3 col-sm-9">
                        <button type="reset" class="btn btn-default button1 button2color">Reset</button>
                      
                        <button type="submit" class="btn btn-default button1 button1color2">Submit</button>
                        
                     </div>
                    </div>
                    
                    <div class="form-group">        
                      <div class="col-sm-offset-3 col-sm-9">
                        
                        <p class="othertext"><a href="#" id="login2"> Log in</a> here
                        </p>
                     </div>
                    </div>
                </div>  
            </form>
        
        </div>
        <div class="modal-footer footer">
          <button type="button" class="btn btn-default cancel1" data-dismiss="modal">Close</button>
          <p class="othertext">Forgot password?<a href="#" id="changepsw2"> Change password</a></p>
           <p class="othertext">Not member?<a href="#"> Sign up</a></p>
        </div>
      </div>
      
    </div>
  </div>
              
            
!

CSS

              
                 body {
    background-color: lavender;
    }
     /* custom navigation start */
      /* navbar */
    
    .navbar-custom {
      /*  
    background-color: #af4600;
    border-color: #af4600;*/
      background: #0a4b33;
      border: 0;
      
    }

    /* navbar brand*/

    .navbar-custom .navbar-brand {
      color: lightgreen;

    }

    .navbar-custom .navbar-brand:hover {
      color: white;
      text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
    }

    /* navbar top level text and links */

    .navbar-default .navbar-nav>.active>a {
      color: blue;
    }

    .navbar-default .navbar-nav>.active>a:focus,
    .navbar-default .navbar-nav>.active>a:hover {
      color: red;
    }

    .navbar-custom .navbar-nav>li,
    .navbar-custom .navbar-nav>li>a {
      color: yellow;

    }

    .navbar-custom .navbar-navside1>li,
    .navbar-custom .navbar-navside1>li>a {
      color: #ffffff;

    }

    /* top level link when mouse is hovering */

    .navbar-custom .navbar-nav>li>a:hover,
    .navbar-custom .navbar-nav>li>a:focus {
      /*  
    color: #ffffff;
    background-color: #af4600;
    color: #ffffff;*/
      background-color: green;
      color: white;
      text-shadow: 3px 3px 2px black, 0 0 25px blue, 0 0 5px darkblue;
    }

    .navbar-custom .navbar-navside1>li>a:hover,
    .navbar-custom .navbar-navside1>li>a:focus {
      /*  
    color: #ffffff;
    background-color: #af4600;*/
      color: cyan;
      background-color: darkgreen;

    }

    /* top level parent link when the drop down is open */

    .navbar-custom .navbar-nav>.open>a,
    .navbar-custom .navbar-nav>.open>a:hover,
    .navbar-custom .navbar-nav>.open>a:focus {
      background-color: cyan;
      /*background-color: #FF6600;*/
      color: red;

    }


    /* level 1 menu bar */
    /*
    .navbar-custom .dropdown-menu {
      /*    background-color: #FF6600;
    background-color: cyan;
    border-color: #af4600;*/
      background-color: pink;
      border-color: pink;
      color: #ffffff;

    }
    */
    /* level 1 menu bar text and links*/

    .navbar-custom .dropdown-menu>li,
    .navbar-custom .dropdown-menu>li>a {
      color: #ffffff;

    }

    /* level 1 menu bar hovering */

    .navbar-custom .dropdown-menu>li>a:hover,
    .navbar-custom .dropdown-menu>li>a:focus {

      color: #ffffff;
      background-color: #af4600;

    }

    /* mobile toggle button formatting */

    .navbar-custom .navbar-toggle {
      /*border-color: #FF6600; */
      border-color: red;
    }

    /* mobile toggle button mouse hover */

    .navbar-custom .navbar-toggle:focus,
    .navbar-custom .navbar-toggle:hover {

      /* background-color: #FF6600;*/
      background-color: lightgreen;

    }

    /* mobile toggle button icon bar tower */

    .navbar-custom .navbar-toggle .icon-bar {
      background-color: #ffffff;

    }

    .navbar-custom .navbar-toggle .icon-bar:hover {
      background-color: red;

    }

    /* mobile 2nd level menu hover */

    .navbar-custom .navbar-nav .open .dropdown-menu1>li>a:focus,
    .navbar-custom .navbar-nav .open .dropdown-menu1>li>a:hover {

      /*background-color: #FF6600;
    color: #ffffff;
 */
      background-color: purple;
      color: pink;

    }

    .navbar-custom .navbar-nav .open .dropdown-menu2>li>a:focus,
    .navbar-custom .navbar-nav .open .dropdown-menu2>li>a:hover {

      /*background-color: #FF6600;
    color: #ffffff;
*/
      background-color: green;
      color: yellow;

    }

    /* mobile 2nd level link */

    .navbar-custom .navbar-nav .open .dropdown-menu2 {
      /* color: #ffffff; */
      background-color: lightgreen;

    }

    .navbar-custom .navbar-nav .open .dropdown-menu1 {
      /* color: #ffffff; */
		background-color: lightblue;

    }

    .navbar-custom .navbar-nav .open .dropdown-menu1> li> a {
      /* color: #ffffff; */
		color: blue;

    }

    .navbar-custom .navbar-nav .open .dropdown-menu2>li>a {
      /* color: #ffffff; */
		color: green;

    }

    .navbar{
			border-radius:0;
			background: #0a4b33;
			}
     /* custom navigation end */
    .navdiv{
			width:100%;
			height:auto;
		}
     /* hamburg icon custom */
    .inner-icon{
          /*
            position:absolute;
            top:5%;
            right:5%;*/
            display:flex;
            flex-direction: column;
            
          }
	.bar1, .bar2, .bar3{
		  /*
			position:relative;*/
			top:0px;
			height:4px;
			width:28px;
			margin:2px;
			background:red;
			transition:0.5s;
			}
  .rotate45dg {
			transform:;
			-ms-transform: rotate(45deg); /* IE 9 */
			transform:rotate(45deg) translate(7px, 6px);
			transition:0.5s;
			}
    
  .rotate-45dg {
			-ms-transform: rotate(45deg); /* IE 9 */
			transform:rotate(-45deg) translate(7px, -7px);
			transition:0.5s;
			}
    .opacity{
			opacity:0;
			}
  .blue{background:blue;}
     /* hamburg icon custom end */
    
     /* navbar controll with @media */
     
     /* jumbotron start */
     
    .jumbo{
        background-color:cyan;
        
    }
    .jumbotron h2{
            color: red;
    }
    .jumbotron p{
        color: green;
    }

    /* jumbotron end */
    
    /* social button start */
    .nolistmark{
        list-style-type:none;
    }
    .buttonsocial {
			width:150px;
			font-size: 18px;
			background: #0097a7;
			background: linear-gradient(#79ff4d, #c6ffb3, #53ff1a);
			color:red ;

    }
    .buttonsocial:hover {
			background: #0097a7;
			background: linear-gradient(#4d79ff,  #99b3ff, #0033cc);
			color:purple;
		}
    /* social button end */
    
    /*panels side*/
    /*panels side*/
    .headcustomsd {
        border-color: transparent;
    }
        
    .headcustomsd > .panel-heading {
        background-color:#ffd480; 
        color: green;
        border-color: transparent;
    }
    .headcustomsd2 > .panel-heading {
        background-color:#ffeecc; 
        color: green;
        border-color: transparent;
    }
    
    .bodycustomsd {
        background-color:#ffeecc;
    }
    .bodycustomsd > .panel-body {
        color: green;
    }
    /*body styling side*/
    .bodycustomsd2 {
        background:#ffeecc;
        color:#e60000;
        /*height:270px;*/
    }
    /*footer styling side*/
    .footercustomsd {
        background:#ffeecc;
        color:#e60000!important;
    }
    /*panels side end*/
    .footercustomcity {
        background:#ffd480!important;
        color:#e60000!important;
        height:56px;
    }
    
    
    form.order .form-control::-moz-placeholder {
        color: green;
      opacity: 1;
    }
    
    form.order .form-control:-ms-input-placeholder {
       color: green;
    }
    form.order .form-control::-webkit-input-placeholder {
       color: green;
    }
    /*
    
    #email2, #firstName2, #lastName2,#phoneNumber2,#areacode2,#telnum21,#postalAddress2,#ZipCode2,#msg,#feedback{
    background-color:#ffe0b2;
    }
    

    .inputbgr {
        background-color:#ffe0b2;
    }*/
    
    
    .glyph2{
        background:#ff3377;
        color:#ffffff;
    }
    .glyph2:hover{
        background:purple;
        color:#ffffff;
    }
    .inputbgr {
            background-color:#ffe0b2;
            border-color: transparent;
            color: red;
    }
    /*
    .inputbgr:focus {
            background-color: lightgreen;
            border-color: lightgreen;
            color: red;
    }
    .inputbgr:hover {
        border-color: green;
    }
    
    .fieldcontent_order{
        color:green;
    }
    .fieldcontent_order :hover{
        color:red;
    }
    /*
     textarea:focus {
        background-color: pink;
        color: blue;
    }
     textarea:hover {
        border-color: red;
    }*/
    /*order form */
     .orderreset {
      padding: 15px 15px;
      font-size: 20px;
      text-align: center;
      cursor: pointer;
      outline: none;
      color: #fff;
      background-color: #4CAF50;
      border: none;
      border-radius: 15px;
      box-shadow: 0 9px #999;
    }

    .orderreset:hover {background-color: #3e8e41}

    .orderreset:active {
      background-color: #3e8e41;
      box-shadow: 0 5px #666;
      transform: translateY(4px);
    }
    
    .ordersmt {
      padding: 15px 15px;
      font-size: 20px;
      text-align: center;
      cursor: pointer;
      outline: none;
      color: #fff;
      background-color: blue;
      border: none;
      border-radius: 15px;
      box-shadow: 0 9px #999;
    }

    .ordersmt:hover {background-color: darkblue}

    .ordersmt:active {
      background-color: darkblue;
      box-shadow: 0 5px #666;
      transform: translateY(4px);
    }
    /*order form end*/
    
    /*registration form */
     .regreset {
      padding: 15px 15px;
      font-size: 20px;
      text-align: center;
      cursor: pointer;
      outline: none;
      color: #fff;
      background-color: #4CAF50;
      border: none;
      border-radius: 15px;
      box-shadow: 0 9px #999;
    }

    .regreset:hover {background-color: #3e8e41}

    .regreset:active {
      background-color: #3e8e41;
      box-shadow: 0 5px #666;
      transform: translateY(4px);
    }
    
    .regsmt {
      padding: 15px 15px;
      font-size: 20px;
      text-align: center;
      cursor: pointer;
      outline: none;
      color: #fff;
      background-color: blue;
      border: none;
      border-radius: 15px;
      box-shadow: 0 9px #999;
    }

    .regsmt:hover {background-color: darkblue}

    .regsmt:active {
      background-color: darkblue;
      box-shadow: 0 5px #666;
      transform: translateY(4px);
    }
    /*registration form end*/
    
    /*contact form */
     .contactreset {
      padding: 15px 15px;
      font-size: 20px;
      text-align: center;
      cursor: pointer;
      outline: none;
      color: #fff;
      background-color: #4CAF50;
      border: none;
      border-radius: 15px;
      box-shadow: 0 9px #999;
    }

    .contactreset:hover {background-color: #3e8e41}

    .contactreset:active {
      background-color: #3e8e41;
      box-shadow: 0 5px #666;
      transform: translateY(4px);
    }
    
    .contactsmt {
      padding: 15px 15px;
      font-size: 20px;
      text-align: center;
      cursor: pointer;
      outline: none;
      color: #fff;
      background-color: blue;
      border: none;
      border-radius: 15px;
      box-shadow: 0 9px #999;
    }

    .contactsmt:hover {background-color: darkblue}

    .contactsmt:active {
      background-color: darkblue;
      box-shadow: 0 5px #666;
      transform: translateY(4px);
    }
    /*contact form end*/
    /*contact form */
    /*
    #email, #firstName, #lastName,#phoneNumber,#areacode,#telnum,#postalAddress,#ZipCode,#msg,#feedback{
    background-color:pink;
    }*/
    .glyph{
        background:#ff9966;
        color:#ff0000;
    }
    /*
    
    */
    .inputbgr_contact {
        background-color:pink;
            border-color: pink;
            color: purple;
    }
    /*  
    .inputbgr_contact:focus {
            background-color: lightblue;
            border-color: lightblue;
            color: blue;
    }
    .inputbgr_contact:hover {
        border-color: red;
    }
    */
    .textarea_contact{
        background-color:pink;
            border-color: pink;
            color: purple;
    }
    .textarea_contact:focus {
        background-color: lightblue;
            border-color: lightblue;
            color: blue;
    }
    .textarea_contact:hover {
        border-color: red;
    }
    
    
    form.contact .form-control::-moz-placeholder {
        color: purple;
      opacity: 1;
    }
    form.contact .form-control:-ms-input-placeholder {
       color: purple;
    }
    form.contact .form-control::-webkit-input-placeholder {
       color: purple;
    }
    
    /*contact form end*/
    
    /*registration form */
    .glyph3{
        background:darkgreen;
        color:yellow;
    }
    /*
    #email3, #firstName3, #lastName3,#phoneNumber3,#areacode3,#telnum3,#postalAddress3,#ZipCode3,#msg,#feedback{
    background-color:lightgreen;
    }
    */
    .inputbgr_reg {
        background-color:lightgreen;
        border-color: lightgreen;
        border: 1px solid lightgreen;
        color: red;
    }
        
    .inputbgr_reg:focus {
            background-color: lightgreen;
            border-color: lightgreen;
            border: 1px solid lightgreen;
            color: purple;
            
    }
    .inputbgr_reg:hover {
        border-color: lightgreen;
    }
    form.registration .form-control::-moz-placeholder {
        color: red;
      opacity: 1;
    }
    form.registration .form-control:-ms-input-placeholder {
       color: red;
    }
    form.registration .form-control::-webkit-input-placeholder {
       color: red;
    }
    form.registration .form-control::-o-placeholder {
        color: red;
      opacity: 1;
    }
    form.registration .form-control::-placeholder {
        color: red;
      opacity: 1;
    }
    /*registration form end*/
    
    /*login modal form */
     .modalreset {
      padding: 15px 15px;
      font-size: 20px;
      text-align: center;
      cursor: pointer;
      outline: none;
      color: #fff;
      background-color: #4CAF50;
      border: none;
      border-radius: 15px;
      box-shadow: 0 9px #999;
    }

    .modalreset:hover {background-color: #3e8e41}

    .modalreset:active {
      background-color: #3e8e41;
      box-shadow: 0 5px #666;
      transform: translateY(4px);
    }
    
    .modalsmt {
      padding: 15px 15px;
      font-size: 20px;
      text-align: center;
      cursor: pointer;
      outline: none;
      color: #fff;
      background-color: blue;
      border: none;
      border-radius: 15px;
      box-shadow: 0 9px #999;
    }

    .modalsmt:hover {background-color: darkblue}

    .modalsmt:active {
      background-color: darkred;
      box-shadow: 0 5px #666;
      transform: translateY(4px);
    }
    .modal_cancel {
      padding: 15px 15px;
      font-size: 20px;
      text-align: center;
      cursor: pointer;
      outline: none;
      color: #fff;
      background-color: red;
      border: none;
      border-radius: 15px;
      box-shadow: 0 9px #999;
    }

    .modal_cancel:hover {background-color: darkred}

    .modal_cancel:active {
      background-color: darkred;
      box-shadow: 0 5px #666;
      transform: translateY(4px);
    }
    /*login modal form end*/
    
@media screen and (min-width: 768px) {
  body {
    background-color: lightgreen;
    margin-top:128px;
    margin-bottom:50px;
  }
   .fix-rel{
        position:fixed;
        height:auto;
        width:100%;
        top:0;
        left:0;
   }
   .flex-container {
      clear:both;
      display: flex;
      flex-direction: column-reverse;
  
    }
    .flex-main {
        width:100%;
        display: flex;
        justify-content: center;
  
    }
    .navbar{
        border-bottom:6px solid red;
    }
    .navbar-brand{
        font-size:28px;
    }
    .navbar-right{
        margin-top:-5rem;
    }
    .flex-container > .flex-main {
        justify-content: center;
    }
    .flex-side {
      display: flex;
      justify-content: flex-end;
  
    }
    /*.flex-direction: row-reverse;*/
     /* footer start */
    .footerdiv{
        background: #69f0ae!important;
        position:fixed;
        bottom:0;
        left:0;
        width:100%;
        height:28px;
        background-color:green;
        color:purple;
        z-index:4;
        }
    
     /* footer end */
    }

@media screen and (max-width: 767px) {
  body {
    background-color: lavender;
    }
    .fix-rel{
        width:100%;
        height:auto;
        position:static;
        top:0;
        left:0;
       }
    .flex-container {
      display: flex;
      flex-direction: column;
  
     }
    .flex-main {
      display: flex;
      justify-content: left;
      
    }
    .navbar-custom .navbar-brand{
        font-size:22px;
        color:orange;
    }
    .navbar{
        border-bottom:6px solid purple;
    }
    .flex-side {
      display: flex;
      justify-content: flex-start;}
    /*.flex-direction: row-reverse;*/
     /* footer start */
    
    .footerdiv {
        bottom:0;
        left:0;
        width:100%;
        height:28px;
        background:green;
        color:yellow;
      }
     /* footer end */
    /*body styling side*/
    .bodycustomsd2 {
        background:#ffeecc;
        color:#e60000;
        /*height:270px;*/
    }
    /*footer styling side*/
    
}

    
    /* css file copy and */
    
    .warning {
        color:red;
    }
    .ok {
        color:green;
    }
    .inputstatus {
        position: static;
        background:#ffeecc;
        padding-top:7px;
        width:100%;
      }
	.inputstatusmodal {
        position: static;
        background: #ccffcc;
		padding-top:7px;
		width:95%;
      } 
    .feedback {
        float: right;
        right: 4px;
      }
    .star {
        float: left;
        left: 6px;
        color: green;
      }
    .error {
        position: relative;
        left: 12px;
      }
    .texttel1{
        color:purple;
    }
	.centergl {
	  display: block;
	  padding: 20px 0;
	  text-align: center;
	  font-size: 6em;
	}
	.centerttl {
	  margin: .5em 0;
	  text-align: center;
	  font-size: 3em;
	  color:orange;
	}
/* 
    .button2 {
        background-color:pink;
    }
    .button2:hover {
        background-color:darkred;
        
    }
    .button2:focus {
        background-color:darkred;
    }
    
    .button2 {
        background-color:pink;
    }*/
    /* button menu lightblue*/
    .button21 { 
        background-color:lightblue;
    }
    .button21 > li > a {
        background-color:lightblue;
    }
    .button21 > li > a:hover {
        background-color:gray;
        color:white;
    }
    /*  
    .buttonsocial.active.focus,
    .btn-default.active.focus,
    .buttonsocial.active:focus, 
    .btn-default.active:focus,
    */
    .buttonsocial.active:hover,
    .btn-default.active:hover,  
    .buttonsocial:active.focus,
    .btn-default:active.focus,
    .buttonsocial:active:focus, 
    .btn-default:active:focus,
    .buttonsocial:active:hover,
    .btn-default.active:hover,
    .open > .dropdown-toggle.buttonsocial.focus,
    .open > .btn-default.active:focus, 
    .open > .dropdown-toggle.buttonsocial:focus,
    .open > .btn-default.active:focus,
    .open > .dropdown-toggle.buttonsocial:hover,
    .open > .btn-default.active:hover{
        background-color:cyan;
    }
    /* button menu end*/
    /* button menu */
    .button31 { 
        background-color:lightgreen;
    }
    .button31 > li > a {
        background-color:lightgreen;
    }
    .button31 > li > a:hover {
        background-color:green;
        color:yellow;
    }
    
    .button3.active.focus,
    .btn-default.active.focus,
    .button3.active:focus, 
    .btn-default.active:focus,
    .button3.active:hover,
    .btn-default.active:hover,  
    .button3:active.focus,
    .btn-default:active.focus,  
    .button3:active:focus, 
    .btn-default:active:focus,
    .button3.active:hover,
    .btn-default.active:hover,
    .open > .dropdown-toggle.button3.focus , .btn-default.active:focus,
    .open > .dropdown-toggle.button3:focus , .btn-default.active:focus,
    .open > .dropdown-toggle.button3:hover , .btn-default.active:hover{
        background-color:pink;
    }
    /* button menu end*/

/* The container */
/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox */

/* The radio and  checkboxes */

form {
  display: inline-block;
  border: 1px solid;
  border-radius: 12px;
  padding: 12px;
}
input[type="checkbox"],
input[type="radio"] {
  width: 2.2em;
  height: 2.2em;
  margin: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  border: 1px solid #800080;
  border-radius: 3px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;fill: %23800080' xml:space='preserve'%3e%3cpath d='M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #eee;
  background-position: 50% 50%;
  background-size: 0 0;
  transition: 0.3s ease;
}
input[type="radio"] {
  border-radius: 50%;
}

input[type="checkbox"]:active,
input[type="radio"]:active {
  background-color: #ddd;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-size: 100% 100%;
}
input[type="reset"],
input[type="submit"] {
  display: block;
  margin: 0.5em 0 0;
}
label{cursor:pointer}

/*modal*/
#login .checkbox input{position:static;margin-left:0}
#changepw .checkbox input{position:static;margin-left:0}

.center1{
  text-align:center;

}
 .left{
    position:relative;
    left:30px;
}  
/* style 1 2 * 
    .warning {
        color:red;
    }
    .ok {
        color:green;
    }
    .inputstatus {
        position: static;
        background-color:#ffeecc;
        padding-top:7px;
        width:100%;
      }
	.inputstatusmodal {
        position: static;
        background: #ccffcc;
		padding-top:7px;
		width:95%;
      } 
    .feedback {
        float: right;
        right: 4px;
      }
    .star {
        float: left;
        left: 6px;
        color: green;
      }
    .error, errorm {
        position: relative;
        left: 12px;
		color:green;
      } /* */
	.inputstatusmodal .errorm {
		color:green;	
	  }
    
    .inputboxmodal1{
        position:relative;
        color:green;
    }
    .inputboxmodal2{
        position:relative;
        color:green;
    }
    .inputboxmodal1 .glyphicon-ok,
    .inputboxmodal2 .glyphicon-ok{
        position:static;
        top:4px;
        padding-right:5px;
        padding-left:10px;
        color:green;
        
    }
    .inputboxmodal1 .glyphicon-remove,
    .inputboxmodal2 .glyphicon-remove{
        position:static;
        top:4px;
        padding-left:10px;
        padding-right:5px;
        color:red;
    }
    /*     */
	    
    #login{
        
        margin-left:10px;
        
    }
    
    #changepw{
        
        margin-left:10px;
        display:none;
    }
    .stylecls{
        font-size:36px;
        color:red;
    }
    .textlabel{
        color:green;
    }
	/*
    .headtextlabel{
        color:orange;
    } */
    .headtextlabel2{
        color:darkred;
    }
    .iconlabel{
        color:darkred;
    }
    .headcustom{
        background-color:green;
        
    }
    .headiconlabelmain{
        font-size:60px;
        color:lightgreen;
        
        }
    .headiconlabel{
        color:purple;
        }
    .othertext{
        color:green;
    }
    .backgroundbody,
    .footer{
        background-color:#ccffcc;
    }
    /*
    .inputboxmodal1 input[type=email],
	.inputboxmodal2 input[type=email],
    .inputboxmodal1 input[type=password],
	.inputboxmodal2 input[type=password]{
        width:95%;
        background-color:lightgreen;
        border:none;
        box-shadow:none;
        border-bottom: 5px solid green;
    }
    .inputboxmodal1 input[type=email],
	.inputboxmodal2 input[type=email],
    .inputboxmodal1 input[type=password],
	.inputboxmodal2 input[type=password]{
        background-color:lightgreen;
        border:none;
        box-shadow:none;
        border-bottom: 5px solid red;
    }
    
    */
    #login .inputboxmodal1 .borderbottom,
	#changepw .inputboxmodal2 .borderbottom{
        width:95%;
        background-color:lightgreen;
        border:none;
        box-shadow:none;
        border-bottom: 5px solid green;
    }
    #login .borderbottom:hover,
	#changepsw .borderbottom:hover{
        background-color:lightgreen;
        border:none;
        box-shadow:none;
        border-bottom: 5px solid red;
    }
    <!-- Place holder modallogin start -->
    form.modallogin .form-control::-moz-placeholder {
        color: orange;
      opacity: 1;
    }
    form.modallogin .form-control:-ms-input-placeholder {
       color: orange;
       opacity: 1;
    }
    form.modallogin .form-control::-webkit-input-placeholder {
       color: orange;
    }
    form.modallogin .form-control::-o-placeholder {
        color: orange;
      opacity: 1;
    }
    form.modallogin .form-control::-placeholder {
        color: orange;
      opacity: 1;
    }
    <!-- Place holder modalresetpw start -->
    form.modalresetpw .form-control::-moz-placeholder {
        color: orange;
      opacity: 1;
    }
    form.modalresetpw .form-control:-ms-input-placeholder {
       color: orange;
       opacity: 1;
    }
    form.modalresetpw .form-control::-webkit-input-placeholder {
       color: orange;
    }
    form.modalresetpw .form-control::-o-placeholder {
        color: orange;
      opacity: 1;
    }
    form.modalresetpw .form-control::-placeholder {
        color: orange;
      opacity: 1;
    }
    
    @media screen and (max-width: 600px) {
        .divchangepw{
        width:100%;
    }
    }
    @media screen and (min-width: 480px) {
	/*
    .title {
    font-size: 36px;
    text-align:center;
    } */
    .titleh3{
        font-size: 28px;
    }
    
    /* Place holder end */
    /*
    .divchangepw{
        width:160px;
        //background-color:pink;
    } */
    .button1{
        float:left;
        margin-left:20px;
        display:inline-block;
        
    }
    .button1color1{
        background-color:green;
        color:white;
        }
    .button1color2{
        background-color:green;
        color:white;
        }   
    .button1color1:hover,
    .button1color2:hover{
        background-color:darkgreen;
        color:white;
        }   
    .button2color{
        background-color:pink;
        color:purple;
        }
    .button2color:hover{
        background-color:orange;
        color:green;
        }
    .cancel1{
        background-color:red;
        color:white;
        float:left;
        margin-left:20px;
        
    }
    .cancel1:hover{
        background-color:darkred;
        color:yellow;
    }
}

@media screen and (max-width: 480px) {
 /*   .title {
    font-size: 28px;
    text-align:center;
    }*/
    .headiconlabelmain{
        font-size:48px;
        color:lightgreen;
        
        }
    .button1{
        width:100%;
        margin-left:0px;
        display:block;
        margin-bottom:20px;
    }
    .button1color1{
        background-color:green;
        color:white;
        }
    .button1color2{
        background-color:green;
        color:white;
        }   
    .button1color1:hover,
    .button1color2:hover{
        background-color:darkgreen;
        color:white;
        }       
    .button2color{
        background-color:pink;
        color:purple;
        }
    .button2color:hover{
        background-color:orange;
        color:white;
        }   
    .cancel1{
        width:100%;
        background-color:red;
        color:white;
        float:left;
        margin-bottom: 20px;
        
    }
    .cancel1:hover{
        background-color:darkred;
        color:yellow;
    }
    .paragraph, #changepw{
        padding-top:10px;
    } 
    .titleh3{
        font-size: 22px;
    }
    
}
.center1 {
        text-align: center;
    }
/* social button*/
.button {
  width:180px;
  background-color: #4CAF50; /* Green */
  border: none;
  color: red;
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button:hover {
    background-image: linear-gradient(#006622, #66ff66, #006622); /*  */
    color: white;
}
.btnName{
    color: green;
}
.button:hover .btnName{
    color: purple;
}
.i{
    font-size:22px;
    
}
.button01 {
    background-image: linear-gradient(#53ff1a, #8cff66, #53ff1a);} /* green gradient */
/* reinforce vertical-align for social buttons */

.socialButtons{
  display:table;
  margin:10px auto;
  padding:0;
}
.nolistmark .button{
  display:flex;
}

.nolistmark .button .fa:before{
 width:25px;
 margin-right:1rem;
}
.nolistmark .button01{float:none;}
/* additions here 19:10:2020 */
.input-group{width:100%}
.input-group-addon {width:75px}
.group-3 input.form-control{width:50%;}
input.form-control{float:none;}

/* additions 25/10/2020 */
.radio-inline input[type="radio"],
.checkbox-inline input[type="checkbox"] {
  position:static;
  cursor:pointer;
  margin-left:0;
}
.form-group .gender.radio-inline{padding-top:0;}


form {
 /* display: inline-block;*/
  display:block;
  border: 1px solid;
  border-radius: 12px;
  padding: 12px;
}
input[type="reset"],
input[type="submit"] {
  /*display:block;*/
  display:inline-block;
  margin: 0.5em 0 0;
}
/* Modal fix checkbox */

#login .checkbox input{position:static;margin-left:0}
#changepw .checkbox input{position:static;margin-left:0}
.termleft {	padding-left:15px;}
.btnclose {
			color:white;}

              
            
!

JS

              
                 $(document).ready(function(){
            $("#changepsw").on("click", function(){
                $("#login").css("display","none");
                $("#changepw").css("display","block");
                //e.preventDefault();
            });
            $("#changepsw2").on("click", function(){
                $("#login").css("display","none");
                $("#changepw").css("display","block");
                //e.preventDefault();
            });
            $("#login2").on("click", function(){
                $("#login").css("display","block");
                $("#changepw").css("display","none");
                //e.preventDefault();
            });
            
            $("#myBtn")
                .click(function () {
                    $("#myModal").modal();
                });
       });
     
    </script>
  
  <script>
  
  $(document)
    .ready(function () {
        $(".icon")
            .click(function () {
                $(".bar1")
                    .toggleClass("blue");
                $(".bar1")
                    .toggleClass("rotate45dg");
                $(".bar2")
                    .toggleClass("opacity");
                $(".bar3")
                    .toggleClass("rotate-45dg");
                
            });
        
        
        //  form
        // first name glyph
        
        $(".fst-name-glyph")
            .on("mouseenter", function () {
                $(".fst-name-glyph")
                    .css("background-color", "darkred");
                $(".fst-name-glyph")
                    .css("color", "orange");
            });
        $(".fst-name-glyph")
            .on("mouseleave", function () {
                $(".fst-name-glyph")
                    .css("background-color", "darkgreen");
                $(".fst-name-glyph")
                    .css("color", "yellow");
            });
        $(".fst-name-glyph")
            .on("mouseenter", function () {
                $(".fst-name-field")
                    .css("background-color", "pink");
            });
        $(".fst-name-glyph")
            .on("mouseleave", function () {
                $(".fst-name-field")
                    .css("background-color", "lightgreen");
            });
        
        // first name field
        
        $(".fst-name-field")
            .on("mouseenter", function () {
                $(".fst-name-glyph")
                    .css("background-color", "darkred");
                $(".fst-name-glyph")
                    .css("color", "orange");
            });
        $(".fst-name-field")
            .on("mouseleave", function () {
                $(".fst-name-glyph")
                    .css("background-color", "darkgreen");
                $(".fst-name-glyph")
                    .css("color", "yellow");
            });
        $(".fst-name-field")
            .on("mouseenter", function () {
                $(".fst-name-field")
                    .css("background-color", "pink");
            });
        $(".fst-name-field")
            .on("mouseleave", function () {
                $(".fst-name-field")
                    .css("background-color", "lightgreen");
            });
        
        // last name glyph
        
        $(".lst-name-glyph")
            .on("mouseenter", function () {
                $(".lst-name-glyph")
                    .css("background-color", "darkred");
                $(".lst-name-glyph")
                    .css("color", "orange");
            });
        $(".lst-name-glyph")
            .on("mouseleave", function () {
                $(".lst-name-glyph")
                    .css("background-color", "darkgreen");
                $(".lst-name-glyph")
                    .css("color", "yellow");
            });
        $(".lst-name-glyph")
            .on("mouseenter", function () {
                $(".lst-name-field")
                    .css("background-color", "pink");
            });
        $(".lst-name-glyph")
            .on("mouseleave", function () {
                $(".lst-name-field")
                    .css("background-color", "lightgreen");
            });
        
        // last name field
        
        $(".lst-name-field")
            .on("mouseenter", function () {
                $(".lst-name-glyph")
                    .css("background-color", "darkred");
                $(".lst-name-glyph")
                    .css("color", "orange");
            });
        $(".lst-name-field")
            .on("mouseleave", function () {
                $(".lst-name-glyph")
                    .css("background-color", "darkgreen");
                $(".lst-name-glyph")
                    .css("color", "yellow");
            });
        $(".lst-name-field")
            .on("mouseenter", function () {
                $(".lst-name-field")
                    .css("background-color", "pink");
            });
        $(".lst-name-field")
            .on("mouseleave", function () {
                $(".lst-name-field")
                    .css("background-color", "lightgreen");
            });
        
        // email glyph
        
        $(".email-glyph")
            .on("mouseenter", function () {
                $(".email-glyph")
                    .css("background-color", "darkred");
                $(".email-glyph")
                    .css("color", "orange");
            });
        $(".email-glyph")
            .on("mouseleave", function () {
                $(".email-glyph")
                    .css("background-color", "darkgreen");
                $(".email-glyph")
                    .css("color", "yellow");
            });
        $(".email-glyph")
            .on("mouseenter", function () {
                $(".email-field")
                    .css("background-color", "pink");
            });
        $(".email-glyph")
            .on("mouseleave", function () {
                $(".email-field")
                    .css("background-color", "lightgreen");
            });
        
        // email field
        
        $(".email-field")
            .on("mouseenter", function () {
                $(".email-glyph")
                    .css("background-color", "darkred");
                $(".email-glyph")
                    .css("color", "orange");
            });
        $(".email-field")
            .on("mouseleave", function () {
                $(".email-glyph")
                    .css("background-color", "darkgreen");
                $(".email-glyph")
                    .css("color", "yellow");
            });
        $(".email-field")
            .on("mouseenter", function () {
                $(".email-field")
                    .css("background-color", "pink");
            });
        $(".email-field")
            .on("mouseleave", function () {
                $(".email-field")
                    .css("background-color", "lightgreen");
            });
        
        // phone glyph
        
        $(".phone-glyph")
            .on("mouseenter", function () {
                $(".phone-glyph")
                    .css("background-color", "darkred");
                $(".phone-glyph")
                    .css("color", "orange");
            });
        $(".phone-glyph")
            .on("mouseleave", function () {
                $(".phone-glyph")
                    .css("background-color", "darkgreen");
                $(".phone-glyph")
                    .css("color", "yellow");
            });
        $(".phone-glyph")
            .on("mouseenter", function () {
                $(".phone-field")
                    .css("background-color", "pink");
            });
        $(".phone-glyph")
            .on("mouseleave", function () {
                $(".phone-field")
                    .css("background-color", "lightgreen");
            });
        
        // phone field
        
        $(".phone-field")
            .on("mouseenter", function () {
                $(".phone-glyph")
                    .css("background-color", "darkred");
                $(".phone-glyph")
                    .css("color", "orange");
            });
        $(".phone-field")
            .on("mouseleave", function () {
                $(".phone-glyph")
                    .css("background-color", "darkgreen");
                $(".phone-glyph")
                    .css("color", "yellow");
            });
        $(".phone-field")
            .on("mouseenter", function () {
                $(".phone-field")
                    .css("background-color", "pink");
            });
        $(".phone-field")
            .on("mouseleave", function () {
                $(".phone-field")
                    .css("background-color", "lightgreen");
            });
        
        // .phone2 glyph
        
        $(".phone2-glyph")
            .on("mouseenter", function () {
                $(".phone2-glyph")
                    .css("background-color", "darkred");
                $(".phone2-glyph")
                    .css("color", "orange");
            });
        $(".phone2-glyph")
            .on("mouseleave", function () {
                $(".phone2-glyph")
                    .css("background-color", "darkgreen");
                $(".phone2-glyph")
                    .css("color", "yellow");
            });
        $(".phone2-glyph")
            .on("mouseenter", function () {
                $(".phone2-field")
                    .css("background-color", "pink");
            });
        $(".phone2-glyph")
            .on("mouseleave", function () {
                $(".phone2-field")
                    .css("background-color", "lightgreen");
            });
        
        // .phone2 field
        
        $(".phone2-field")
            .on("mouseenter", function () {
                $(".phone2-glyph")
                    .css("background-color", "darkred");
                $(".phone2-glyph")
                    .css("color", "orange");
            });
        $(".phone2-field")
            .on("mouseleave", function () {
                $(".phone2-glyph")
                    .css("background-color", "darkgreen");
                $(".phone2-glyph")
                    .css("color", "yellow");
            });
        $(".phone2-field")
            .on("mouseenter", function () {
                $(".phone2-field")
                    .css("background-color", "pink");
            });
        $(".phone2-field")
            .on("mouseleave", function () {
                $(".phone2-field")
                    .css("background-color", "lightgreen");
            });
        
        // .address glyph
        
        $(".address-glyph")
            .on("mouseenter", function () {
                $(".address-glyph")
                    .css("background-color", "darkred");
                $(".address-glyph")
                    .css("color", "orange");
            });
        $(".address-glyph")
            .on("mouseleave", function () {
                $(".address-glyph")
                    .css("background-color", "darkgreen");
                $(".address-glyph")
                    .css("color", "yellow");
            });
        $(".address-glyph")
            .on("mouseenter", function () {
                $(".address-field")
                    .css("background-color", "pink");
            });
        $(".address-glyph")
            .on("mouseleave", function () {
                $(".address-field")
                    .css("background-color", "lightgreen");
            });
        
        // .address field
        
        $(".address-field")
            .on("mouseenter", function () {
                $(".address-glyph")
                    .css("background-color", "darkred");
                $(".address-glyph")
                    .css("color", "orange");
            });
        $(".address-field")
            .on("mouseleave", function () {
                $(".address-glyph")
                    .css("background-color", "darkgreen");
                $(".address-glyph")
                    .css("color", "yellow");
            });
        $(".address-field")
            .on("mouseenter", function () {
                $(".address-field")
                    .css("background-color", "pink");
            });
        $(".address-field")
            .on("mouseleave", function () {
                $(".address-field")
                    .css("background-color", "lightgreen");
            });
        
        // .zip glyph
        
        $(".zip-glyph")
            .on("mouseenter", function () {
                $(".zip-glyph")
                    .css("background-color", "darkred");
                $(".zip-glyph")
                    .css("color", "orange");
            });
        $(".zip-glyph")
            .on("mouseleave", function () {
                $(".zip-glyph")
                    .css("background-color", "darkgreen");
                $(".zip-glyph")
                    .css("color", "yellow");
            });
        $(".zip-glyph")
            .on("mouseenter", function () {
                $(".zip-field")
                    .css("background-color", "pink");
            });
        $(".zip-glyph")
            .on("mouseleave", function () {
                $(".zip-field")
                    .css("background-color", "lightgreen");
            });
        
        // .zip field
        
        $(".zip-field")
            .on("mouseenter", function () {
                $(".zip-glyph")
                    .css("background-color", "darkred");
                $(".zip-glyph")
                    .css("color", "orange");
            });
        $(".zip-field")
            .on("mouseleave", function () {
                $(".zip-glyph")
                    .css("background-color", "darkgreen");
                $(".zip-glyph")
                    .css("color", "yellow");
            });
        $(".zip-field")
            .on("mouseenter", function () {
                $(".zip-field")
                    .css("background-color", "pink");
            });
        $(".zip-field")
            .on("mouseleave", function () {
                $(".zip-field")
                    .css("background-color", "lightgreen");
            });
        // .city glyph
        
        $(".city-glyph")
            .on("mouseenter", function () {
                $(".city-glyph")
                    .css("background-color", "darkred");
                $(".city-glyph")
                    .css("color", "orange");
            });
        $(".city-glyph")
            .on("mouseleave", function () {
                $(".city-glyph")
                    .css("background-color", "darkgreen");
                $(".city-glyph")
                    .css("color", "yellow");
            });
        $(".city-glyph")
            .on("mouseenter", function () {
                $(".city-field")
                    .css("background-color", "pink");
            });
        $(".city-glyph")
            .on("mouseleave", function () {
                $(".city-field")
                    .css("background-color", "lightgreen");
            });
        
        // .city field
        
        $(".city-field")
            .on("mouseenter", function () {
                $(".city-glyph")
                    .css("background-color", "darkred");
                $(".city-glyph")
                    .css("color", "orange");
            });
        $(".city-field")
            .on("mouseleave", function () {
                $(".city-glyph")
                    .css("background-color", "darkgreen");
                $(".city-glyph")
                    .css("color", "yellow");
            });
        $(".city-field")
            .on("mouseenter", function () {
                $(".city-field")
                    .css("background-color", "pink");
            });
        $(".city-field")
            .on("mouseleave", function () {
                $(".city-field")
                    .css("background-color", "lightgreen");
            });
        // .pwd glyph
        $(".pwd-glyph")
            .on("mouseenter", function () {
                $(".pwd-glyph")
                    .css("background-color", "darkred");
                $(".pwd-glyph")
                    .css("color", "orange");
            });
        $(".pwd-glyph")
            .on("mouseleave", function () {
                $(".pwd-glyph")
                    .css("background-color", "darkgreen");
                $(".pwd-glyph")
                    .css("color", "yellow");
            });
        $(".pwd-glyph")
            .on("mouseenter", function () {
                $(".pwd-field")
                    .css("background-color", "pink");
            });
        $(".pwd-glyph")
            .on("mouseleave", function () {
                $(".pwd-field")
                    .css("background-color", "lightgreen");
            });
        
        // .pwd field
        
        $(".pwd-field")
            .on("mouseenter", function () {
                $(".pwd-glyph")
                    .css("background-color", "darkred");
                $(".pwd-glyph")
                    .css("color", "orange");
            });
        $(".pwd-field")
            .on("mouseleave", function () {
                $(".pwd-glyph")
                    .css("background-color", "darkgreen");
                $(".pwd-glyph")
                    .css("color", "yellow");
            });
        $(".pwd-field")
            .on("mouseenter", function () {
                $(".pwd-field")
                    .css("background-color", "pink");
            });
        $(".pwd-field")
            .on("mouseleave", function () {
                $(".pwd-field")
                    .css("background-color", "lightgreen");
            });
        // .re glyph
        $(".re-glyph")
            .on("mouseenter", function () {
                $(".re-glyph")
                    .css("background-color", "darkred");
                $(".re-glyph")
                    .css("color", "orange");
            });
        $(".re-glyph")
            .on("mouseleave", function () {
                $(".re-glyph")
                    .css("background-color", "darkgreen");
                $(".re-glyph")
                    .css("color", "yellow");
            });
        $(".re-glyph")
            .on("mouseenter", function () {
                $(".re-field")
                    .css("background-color", "pink");
            });
        $(".re-glyph")
            .on("mouseleave", function () {
                $(".re-field")
                    .css("background-color", "lightgreen");
            });
        
        // .re field
        
        $(".re-field")
            .on("mouseenter", function () {
                $(".re-glyph")
                    .css("background-color", "darkred");
                $(".re-glyph")
                    .css("color", "orange");
            });
        $(".re-field")
            .on("mouseleave", function () {
                $(".re-glyph")
                    .css("background-color", "darkgreen");
                $(".re-glyph")
                    .css("color", "yellow");
            });
        $(".re-field")
            .on("mouseenter", function () {
                $(".re-field")
                    .css("background-color", "pink");
            });
        $(".re-field")
            .on("mouseleave", function () {
                $(".re-field")
                    .css("background-color", "lightgreen");
            });
        // form end 
        
         /* modal call */ 
        $("#myBtn")
            .click(function () {
                $("#myModal").modal();
            });
        
       /* input with  dropdown */ 
        $(".citylist li").click(function () {
                //var city = $(this).find("citylist").text().trim();
				var city = $(this).text().trim();
                var name = $("#your-city").attr("name");
                //alert(city);
                $("#your-city").val(city);
                $("#demo2").collapse("hide");
            /**/    if ( city != "") {
                
                        $(".form-group")
                            //.next()
                            .find("#errorid")
                            .html(name + " is OK: Your data has been entered correctly");
                        $(".form-group")
                            //.next()
                            .find("#errorid")
                            .addClass('ok')
                            .removeClass('warning');
                        $(".form-group")
                            //.next()
                            .find("#feedbackid")
                            .removeClass("glyphicon glyphicon-remove")
                            .addClass("glyphicon glyphicon-ok")
                            .removeClass("warning")
                            .addClass("ok");
                        $(".form-group")
                            //.next()
                            .find("#cityRequired")
                            .addClass('ok')
                            .removeClass('warning');    
                    } else {
                        $(".form-group")
                            //.next()
                            .find("#errorid")
                            .html("Your " + name + " field is Empty !")
                            .removeClass("ok")
                            .addClass("warning");
                        $(".form-group")
                            //.next()
                            .find("#feedbackid")
                            .removeClass("glyphicon glyphicon-ok")
                            .addClass("glyphicon glyphicon-remove")
                            .removeClass("ok")
                            .addClass("warning");
                        $(".form-group")
                            //.next()
                            .find("#cityRequired")
                            .removeClass("ok")
                            .addClass("warning");   
                    }
                
            });
        
        
        
        $('.input-group')
            .on('focusin focusout input', function () {
                console.log('cnanged');
                var name = $(this)
                    .find(".check,textarea")
                    .attr("name");
                var value = $(this)
                    .find(".check,textarea")
                    .val()
                    .trim();
                
                var fakeReg = /(.)\1{2,}/;
                var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
                var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/; //13 or more occurences
                /*  */
                var $form = $("form.register");
                var inputs = $form[0].elements;
                /* The regex for ensuring that letters aren’t used, can just be a simple regex for numbers and separators.
/^[0-9 .-]+$/ */
                
                /* first name */
                if (value === "") {
                    $(this)
                        .next()
                        .find(".error")
                        .html("Your " + name + " field is Empty !")
                        .removeClass("ok")
                        .addClass("warning");
					 
                    $(this)
                        .next()
                        .find(".feedback")
                        .removeClass("glyphicon glyphicon-ok")
                        .addClass("glyphicon glyphicon-remove")
                        .removeClass("ok")
                        .addClass("warning");
                    if (name === "First Name") {
                        $("#fnameRequired")
                            .removeClass("ok")
                            .addClass("warning");
                     }  
                    if (name === "Last Name") {
                        $("#lnameRequired")
                            .removeClass("ok")
                            .addClass("warning");
                    }   
                    // $(this).find(".starrq").removeClass("ok").addClass("warning");
                    
                } else {
                    //$(this).next().find(".error").html("Your "+name+" field is OK !").removeClass("warning").addClass("ok");
                    //$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
                    
                    
                    /* first name */
                    if (name === "First Name") {
                        if (value.length > 19) {
                            // condition for more than 19 char
                            $(this)
                                .next()
                                .find(".error")
                                .html(name + " is Incorrect: Please enter no more than 19 char ");
                            $(this)
                                .next()
                                .find(".error")
                                .addClass('warning')
                                .removeClass('ok');
                            $(this)
                                .next()
                                .find(".feedback")
                                .removeClass("glyphicon glyphicon-ok")
                                .addClass("glyphicon glyphicon-remove")
                                .removeClass("ok")
                                .addClass("warning");
                            $("#fnameRequired")
                                .removeClass("ok")
                                .addClass("warning");   
                            //$(this).css("border","2px solid red");
                                
                        } else {
                        
                            if (fakeReg.test(value)) {
                                $(this)
                                    .next()
                                    .find(".error")
                                    .html(name + " is Fake text: Please remove repetition ");
                                $(this)
                                    .next()
                                    .find(".feedback")
                                    .removeClass("glyphicon glyphicon-ok")
                                    .addClass("glyphicon glyphicon-remove")
                                    .removeClass("ok")
                                    .addClass("warning");
                                $(this)
                                    .next()
                                    .find(".error")
                                    .addClass('warning')
                                    .removeClass('ok');
                                $("#fnameRequired")
                                    .removeClass("ok")
                                    .addClass("warning");   
                                //$(this).css("border","2px solid red");
                            } else {
                                if (/^([a-zA-Z]{2,16})+$/.test(value) === true) {
                                    $(this)
                                        .next()
                                        .find(".error")
                                        .html(name + " is OK: Your data has been entered correctly");
                                    $(this)
                                        .next()
                                        .find(".error")
                                        .addClass('ok')
                                        .removeClass('warning');
                                    $(this)
                                        .next()
                                        .find(".feedback")
                                        .removeClass("glyphicon glyphicon-remove")
                                        .addClass("glyphicon glyphicon-ok")
                                        .removeClass("warning")
                                        .addClass("ok");
                                    $("#fnameRequired")
                                        .removeClass("warning")
                                        .addClass("ok");    
                                } else {
                                    
                                    if (/^([a-zA-Z]{1,16})+$/.test(value) === true) {
                                        // condition for less than 2 char
                                        $(this)
                                            .next()
                                            .find(".error")
                                            .html(name + " is Incorrect: Please enter 2 upper case or lower case at least ");
                                        $(this)
                                            .next()
                                            .find(".error")
                                            .addClass('warning')
                                            .removeClass('ok');
                                        $(this)
                                            .next()
                                            .find(".feedback")
                                            .removeClass("glyphicon glyphicon-ok")
                                            .addClass("glyphicon glyphicon-remove")
                                            .removeClass("ok")
                                            .addClass("warning");
                                        $("#fnameRequired")
                                            .removeClass("ok")
                                            .addClass("warning");   
                                        //$(this).css("border","2px solid red");
                                    } else {
                                        // condition for non a to z
                                        $(this)
                                            .next()
                                            .find(".error")
                                            .html(name + " is Incorrect: Please enter upper case and lower case only ");
                                        $(this)
                                            .next()
                                            .find(".error")
                                            .addClass('warning')
                                            .removeClass('ok');
                                        $(this)
                                            .next()
                                            .find(".feedback")
                                            .removeClass("glyphicon glyphicon-ok")
                                            .addClass("glyphicon glyphicon-remove")
                                            .removeClass("ok")
                                            .addClass("warning");
                                        $("#fnameRequired")
                                            .removeClass("ok")
                                            .addClass("warning");   
                                        //$(this).css("border","2px solid red");
                                    }
                                    
                                    //if (value.length > 16) {
                                    //    $(this).next().find(".error").html(name + " is Incorrect: Please enter no more then 16 char ");
                                    //       }
                                }
                            }
                        }
                    }
                    /* last name */
                    if (name === "Last Name") {
                        if (value.length > 19) {
                            // condition for more than 19 char
                            $(this)
                                .next()
                                .find(".error")
                                .html(name + " is Incorrect: Please enter no more than 19 char ");
                            $(this)
                                .next()
                                .find(".error")
                                .addClass('warning')
                                .removeClass('ok');
                            $(this)
                                .next()
                                .find(".feedback")
                                .removeClass("glyphicon glyphicon-ok")
                                .addClass("glyphicon glyphicon-remove")
                                .removeClass("ok")
                                .addClass("warning");
                            $("#lnameRequired")
                                .removeClass("ok")
                                .addClass("warning");   
                            //$(this).css("border","2px solid red");
                        } else {
                            if (fakeReg.test(value)) {
                                $(this)
                                    .next()
                                    .find(".error")
                                    .html(name + " is Fake text: Please remove repetition ");
                                $(this)
                                    .next()
                                    .find(".feedback")
                                    .removeClass("glyphicon glyphicon-ok")
                                    .addClass("glyphicon glyphicon-remove")
                                    .removeClass("ok")
                                    .addClass("warning");
                                $(this)
                                    .next()
                                    .find(".error")
                                    .addClass('warning')
                                    .removeClass('ok');
                                $("#lnameRequired")
                                    .removeClass("ok")
                                    .addClass("warning");   
                                //$(this).css("border","2px solid red");
                            } else {
                                if (/^([a-zA-Z]{2,16})+$/.test(value) === true) {
                                    $(this)
                                        .next()
                                        .find(".error")
                                        .html(name + " is OK: Your data has been entered correctly");
                                    $(this)
                                        .next()
                                        .find(".error")
                                        .addClass('ok')
                                        .removeClass('warning');
                                    $(this)
                                        .next()
                                        .find(".feedback")
                                        .removeClass("glyphicon glyphicon-remove")
                                        .addClass("glyphicon glyphicon-ok")
                                        .removeClass("warning")
                                        .addClass("ok");
                                    $("#lnameRequired")
                                        .removeClass("warning")
                                        .addClass("ok");    
                                } else {
                                    
                                    if (/^([a-zA-Z]{1,16})+$/.test(value) === true) {
                                        // condition for less than 2 char
                                        $(this)
                                            .next()
                                            .find(".error")
                                            .html(name + " is Incorrect: Please enter 2 upper case or lower case at least ");
                                        $(this)
                                            .next()
                                            .find(".error")
                                            .addClass('warning')
                                            .removeClass('ok');
                                        $(this)
                                            .next()
                                            .find(".feedback")
                                            .removeClass("glyphicon glyphicon-ok")
                                            .addClass("glyphicon glyphicon-remove")
                                            .removeClass("ok")
                                            .addClass("warning");
                                        $("#lnameRequired")
                                            .removeClass("ok")
                                            .addClass("warning");   
                                        //$(this).css("border","2px solid red");
                                    } else {
                                        // condition for non a to z
                                        $(this)
                                            .next()
                                            .find(".error")
                                            .html(name + " is Incorrect: Please enter upper case and lower case only ");
                                        $(this)
                                            .next()
                                            .find(".error")
                                            .addClass('warning')
                                            .removeClass('ok');
                                        $(this)
                                            .next()
                                            .find(".feedback")
                                            .removeClass("glyphicon glyphicon-ok")
                                            .addClass("glyphicon glyphicon-remove")
                                            .removeClass("ok")
                                            .addClass("warning");
                                        $("#lnameRequired")
                                            .removeClass("ok")
                                            .addClass("warning");   
                                        //$(this).css("border","2px solid red");
                                    }
                                    
                                    //if (value.length > 16) {
                                    //    $(this).next().find(".error").html(name + " is Incorrect: Please enter no more then 16 char ");
                                    //       }
                                }
                            }
                        }
                    }
                    
                }
                /* Phone number */
                var inputstr = value;
                if (name === "Phone Number") {
                    if (inputstr.length > 0) {
                        //var inputstr = $(this).val();
                        var phoneReg =/^\(?([0-9]{4})\)?([ .-]?)([0-9]{3})\2([0-9]{4})$/;
                        if (!phoneReg.test(inputstr)) {
                            // email
                            $(this)
                                .next()
                                .find(".error")
                                .html(name + " is Incorrect: Please enter Phone Number correctly ");
                            $(this)
                                .next()
                                .find(".error")
                                .addClass('warning')
                                .removeClass('ok');
                            $(this)
                                .next()
                                .find(".feedback")
                                .removeClass("glyphicon glyphicon-ok")
                                .addClass("glyphicon glyphicon-remove")
                                .removeClass("ok")
                                .addClass("warning");
                            $("#phoneRequired")
                                .removeClass("ok")
                                .addClass("warning");   
                            //$(this).css("border","2px solid red");
                        } else {
                            $(this)
                                .next()
                                .find(".error")
                                .html(name + " is Ok : Your Phone number has been entered correctly ");
                            $(this)
                                .next()
                                .find(".error")
                                .addClass('ok')
                                .removeClass('warning');
                            $(this)
                                .next()
                                .find(".feedback")
                                .removeClass("glyphicon glyphicon-remove")
                                .addClass("glyphicon glyphicon-ok")
                                .removeClass("warning")
                                .addClass("ok");
                            $("#phoneRequired")
                                .removeClass("warning")
                                .addClass("ok");    
                            //$(this).css("border","2px solid green");
                            //$(this).css("border","2px solid green");
                        }
                    } else {
                        $(this)
                            .next()
                            .find(".error")
                            .html(name + " is EMPTY: Please enter data into this input");
                        $(this)
                            .next()
                            .find(".error")
                            .addClass('warning')
                            .removeClass('ok');
                        $(this)
                            .next()
                            .find(".feedback")
                            .removeClass("glyphicon glyphicon-ok")
                            .addClass("glyphicon glyphicon-remove")
                            .removeClass("ok")
                            .addClass("warning");
                        $("#phoneRequired")
                            .removeClass("ok")
                            .addClass("warning");   
                        //$(this).css("border","2px solid red");
                    }
                }
                /* email */
                
                //var emailName = (email) => E-mail.split("@")[0];
            if (name === "E-mail") { 
                        if (value != "") {
                           //$(this).next().find(".error").html(name+'  is ok').removeClass("warning").addClass("ok");
                           //$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
                          
                          if(fakeReg.test(value)) {
                                $(this).next().find(".error").html(name + " is Fake text: Please remove repetition ");
                                $(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
                                $(this).next().find(".error").addClass('warning').removeClass('ok');
                                $("#emailRequired").removeClass("ok").addClass("warning");
                                //$(this).css("border","2px solid red");
                                } else {
                               if(emailReg.test(value)) {
                                    $(this).next().find(".error").html(name + " is Ok : Your data has been entered correctly ");
                                    $(this).next().find(".error").addClass('ok').removeClass('warning');
                                    $(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
                                    $("#emailRequired").removeClass("warning").addClass("ok");
                                    //$(this).css("border","2px solid green");
                               
                               } else {
                                    $(this).next().find(".error").html(name + " is Incorrect: Please enter it correctly ").removeClass('ok').addClass('warning');
                                    $(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
                                    $("#emailRequired").removeClass("ok").addClass("warning");
                                    
                                        }
                                                    }
                            } else {    
                               $(this).next().find(".error").html(name+' is empty ').removeClass("ok").addClass("warning"); 
                               $(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
                               $("#emailRequired").removeClass("ok").addClass("warning");
                            }

                    } 
                //var emailName = (email) => E-mail.split("@")[0];
             
               /* address */
                if (name === "Postal Address") {
                    if (value.length > 0) {
                        //var value = $(this).val();
                        // var AddressReg =  /^[#.0-9a-zA-Z\s,-]+$/ ;
                        var AddressReg = /^\d+\s[A-z]+\s[A-z]+/g;
                        if (!AddressReg.test(value)) {
                            // address
                            $(this)
                                .next()
                                .find(".error")
                                .html(name + " is Incorrect: Please enter Address correctly ");
                            $(this)
                                .next()
                                .find(".error")
                                .addClass('warning')
                                .removeClass('ok');
                            $(this)
                                .next()
                                .find(".feedback")
                                .removeClass("glyphicon glyphicon-ok")
                                .addClass("glyphicon glyphicon-remove")
                                .removeClass("ok")
                                .addClass("warning");
                            $("#postalRequired")
                                .removeClass("ok")
                                .addClass("warning");   
                            //$(this).css("border","2px solid red");
                        } else {
                            $(this)
                                .next()
                                .find(".error")
                                .html(name + " is Ok : Your data has been entered correctly ");
                            $(this)
                                .next()
                                .find(".error")
                                .addClass('ok')
                                .removeClass('warning');
                            $(this)
                                .next()
                                .find(".feedback")
                                .removeClass("glyphicon glyphicon-remove")
                                .addClass("glyphicon glyphicon-ok")
                                .removeClass("warning")
                                .addClass("ok");
                            $("#postalRequired")
                                .removeClass("warning")
                                .addClass("ok");    
                            //$(this).css("border","2px solid green");
                        }
                    } else {
                        $(this)
                            .next()
                            .find(".error")
                            .html(name + " is EMPTY: Please enter data into this input");
                        $(this)
                            .next()
                            .find(".error")
                            .addClass('warning')
                            .removeClass('ok');
                        $(this)
                            .next()
                            .find(".feedback")
                            .removeClass("glyphicon glyphicon-ok")
                            .addClass("glyphicon glyphicon-remove")
                            .removeClass("ok")
                            .addClass("warning");
                        $("#postalRequired")
                            .removeClass("ok")
                            .addClass("warning");   
                        //$(this).css("border","2px solid red");
                    }
                }
                /* postcode  */
                if (name === "zip code") {
                    if (value.length > 0) {
                        //var inputstr = $(this).val();
                        //var PostcodeReg = /^[A-Z]{1,2}[0-9][0-9A-Z]?\s?[0-9][A-Z]{2}+$/g;
                        var PostcodeReg = /^[a-zA-Z]{1,2}([0-9]{1,2}|[0-9][a-zA-Z])\s*[0-9][a-zA-Z]{2}$/;
                        if (!PostcodeReg.test(value)) {
                            //post-code
                            $(this)
                                .next()
                                .find(".error")
                                .html(name + " is Incorrect: Please enter Post-code correctly ");
                            $(this)
                                .next()
                                .find(".error")
                                .addClass('warning')
                                .removeClass('ok');
                            $(this)
                                .next()
                                .find(".feedback")
                                .removeClass("glyphicon glyphicon-ok")
                                .addClass("glyphicon glyphicon-remove")
                                .removeClass("ok")
                                .addClass("warning");
                            $("#zipRequired")
                                .removeClass("ok")
                                .addClass("warning");   
                            //$(this).css("border","2px solid red");
                        } else {
                            $(this)
                                .next()
                                .find(".error")
                                .html(name + " is Ok : Your data has been entered correctly ");
                            $(this)
                                .next()
                                .find(".error")
                                .addClass('ok')
                                .removeClass('warning');
                            $(this)
                                .next()
                                .find(".feedback")
                                .removeClass("glyphicon glyphicon-remove")
                                .addClass("glyphicon glyphicon-ok")
                                .removeClass("warning")
                                .addClass("ok");
                            $("#zipRequired")
                                .removeClass("warning")
                                .addClass("ok");    
                            //$(this).css("border","2px solid green");
                        }
                    } else {
                        $(this)
                            .next()
                            .find(".error")
                            .html(name + " is EMPTY: Please enter data into this input");
                        $(this)
                            .next()
                            .find(".error")
                            .addClass('warning')
                            .removeClass('ok');
                        $(this)
                            .next()
                            .find(".feedback")
                            .removeClass("glyphicon glyphicon-ok")
                            .addClass("glyphicon glyphicon-remove")
                            .removeClass("ok")
                            .addClass("warning");
                        $("#zipRequired")
                            .removeClass("ok")
                            .addClass("warning");   
                        //$(this).css("border","2px solid red");
                    }
                    
                }
                /* city  */
                
                if (name === "Your City") {
                    //$("#demo2").collapse("hide");
                    if (value === "") {
                        $(this)
                            .next()
                            .find(".error")
                            .html("Your " + name + " field is Empty !")
                            .removeClass("ok")
                            .addClass("warning");
                        $(this)
                            .next()
                            .find(".feedback")
                            .removeClass("glyphicon glyphicon-ok")
                            .addClass("glyphicon glyphicon-remove")
                            .removeClass("ok")
                            .addClass("warning");
                        $("#cityRequired")
                            .removeClass("ok")
                            .addClass("warning");   
                        // $(this).find(".starrq").removeClass("ok").addClass("warning");
                        
                    } else {
                        
                        $(this)
                            .next()
                            .find(".error")
                            .html("Your " + name + " field is OK !")
                            .removeClass("warning")
                            .addClass("ok");
                        $(this)
                            .next()
                            .find(".feedback")
                            .removeClass("glyphicon glyphicon-remove")
                            .addClass("glyphicon glyphicon-ok")
                            .removeClass("warning")
                            .addClass("ok");
                        $("#cityRequired")
                            .removeClass("warning")
                            .addClass("ok");
                    
                    }
                    
                }
                /*  } */
                
                
                if (name === "Password") {
                    var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
                    var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/; //13 or more occurences
                    if (value.length > 0) {
                        /*  
                            var inputstr = $(this).val();
                            var pswstr = $(this).val();
                            var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
                            var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/;//13 or more occurences
                            */
                        // fake text    
                        //var inputstr = $(this).val();
                        //var fakeReg = /(.)\1{2,}/;
                        if (fakeReg.test(value)) {
                            $(this)
                                .next()
                                .find(".error")
                                .html(name + " is Fake text: Please remove repetition ");
                            $(this)
                                .next()
                                .find(".feedback")
                                .removeClass("glyphicon glyphicon-ok")
                                .addClass("glyphicon glyphicon-remove")
                                .removeClass("ok")
                                .addClass("warning");
                            $(this)
                                .next()
                                .find(".error")
                                .addClass('warning')
                                .removeClass('ok');
                            $("#pwdRequired")
                                .removeClass("ok")
                                .addClass("warning");   
                            //$(this).css("border","2px solid red");
                        } else {
                            //check if password and last-name is the same
                            if (value === inputs["Your City"].value) {
                                $(this)
                                    .next()
                                    .find(".error")
                                    .html(name + " is Incorrect: Password shouldn't match city name");
                                $(this)
                                    .next()
                                    .find(".error")
                                    .addClass('warning')
                                    .removeClass('ok');
                                $(this)
                                    .next()
                                    .find(".feedback")
                                    .removeClass("glyphicon glyphicon-ok")
                                    .addClass("glyphicon glyphicon-remove")
                                    .removeClass("ok")
                                    .addClass("warning");
                                $("#pwdRequired")
                                    .removeClass("ok")
                                    .addClass("warning");   
                                //$(this).css("border","2px solid red");
                            } else {
                                if (value === inputs["Last Name"].value) {
                                    $(this)
                                        .next()
                                        .find(".error")
                                        .html(name + " is Incorrect: Password shouldn't match last-name ");
                                    $(this)
                                        .next()
                                        .find(".error")
                                        .addClass('warning')
                                        .removeClass('ok');
                                    $(this)
                                        .next()
                                        .find(".feedback")
                                        .removeClass("glyphicon glyphicon-ok")
                                        .addClass("glyphicon glyphicon-remove")
                                        .removeClass("ok")
                                        .addClass("warning");
                                    $("#pwdRequired")
                                        .removeClass("ok")
                                        .addClass("warning");   
                                    //$(this).css("border","2px solid red");
                                } else {
                                    //check if password and first-name is the same
                                    if (value === inputs["First Name"].value) {
                                        $(this)
                                            .next()
                                            .find(".error")
                                            .html(name + " is Incorrect: Password shouldn't match fist-name ");
                                        $(this)
                                            .next()
                                            .find(".error")
                                            .addClass('warning')
                                            .removeClass('ok');
                                        $(this)
                                            .next()
                                            .find(".feedback")
                                            .removeClass("glyphicon glyphicon-ok")
                                            .addClass("glyphicon glyphicon-remove")
                                            .removeClass("ok")
                                            .addClass("warning");
                                        $("#pwdRequired")
                                            .removeClass("ok")
                                            .addClass("warning");   
                                        //$(this).css("border","2px solid red");
                                    } else {
                                        if (!pswReglow.test(value)) {
                                            $(this)
                                                .next()
                                                .find(".error")
                                                .html(name + " is Incorrect: Please enter at lest 6 character ");
                                            $(this)
                                                .next()
                                                .find(".feedback")
                                                .removeClass("glyphicon glyphicon-ok")
                                                .addClass("glyphicon glyphicon-remove")
                                                .removeClass("ok")
                                                .addClass("warning");
                                            $(this)
                                                .next()
                                                .find(".error")
                                                .addClass('warning')
                                                .removeClass('ok');
                                            $("#pwdRequired")
                                                .removeClass("ok")
                                                .addClass("warning");   
                                            //$(this).css("border","2px solid red");
                                        } else {
                                            if (!pswRegheigh.test(value)) {
                                                
                                                // condition to check if length is bigger than 12 char
                                                
                                                $(this)
                                                    .next()
                                                    .find(".error")
                                                    .html(name + " is OK: Your data has been entered correctly");
                                                $(this)
                                                    .next()
                                                    .find(".error")
                                                    .addClass('ok')
                                                    .removeClass('warning');
                                                $(this)
                                                    .next()
                                                    .find(".feedback")
                                                    .removeClass("glyphicon glyphicon-remove")
                                                    .addClass("glyphicon glyphicon-ok")
                                                    .removeClass("warning")
                                                    .addClass("ok");
                                                $("#pwdRequired")
                                                    .removeClass("warning")
                                                    .addClass("ok");    
                                                //$(this).css("border","2px solid green");   
                                            } else {
                                                $(this)
                                                    .next()
                                                    .find(".error")
                                                    .html(name + " is Incorrect: Please enter no more than 12 character " + inputstr);
                                                $(this)
                                                    .next()
                                                    .find(".error")
                                                    .addClass('warning')
                                                    .removeClass('ok');
                                                $(this)
                                                    .next()
                                                    .find(".feedback")
                                                    .removeClass("glyphicon glyphicon-ok")
                                                    .addClass("glyphicon glyphicon-remove")
                                                    .removeClass("ok")
                                                    .addClass("warning");
                                                $("#pwdRequired")
                                                    .removeClass("ok")
                                                    .addClass("warning");   
                                                //$(this).css("border","2px solid red");
                                            }
                                        }
                                        
                                        //$(this).next(".fielderror").html(inputattr+" is OK: Your data has been entered correctly "+inputstr);
                                        //$(this).next(".fielderror").addClass('ok').removeClass('warning');
                                    }
                                }
                            }
                            /*      */
                        }
                    } else {
                        $(this)
                            .next()
                            .find(".error")
                            .html(inputattr + " is EMPTY: Please enter data into this input");
                        $(this)
                            .next()
                            .find(".error")
                            .addClass('warning')
                            .removeClass('ok');
                        
                        $("#pwdRequired")
                            .removeClass("ok")
                            .addClass("warning");
                        //$(this).css("border","2px solid red");
                    }
                }
                /* retype password  */
                
                if (name === "Retype Password") {
                    if (value.length > 0) {
                        if (inputstr !== inputs.Password.value) {
                            $(this)
                                .next()
                                .find(".error")
                                .html(name + " is Incorrect: Password doesn't match retyped pwd ");
							$(this)
                                .next()
                                .find(".errorm")
                                .html(name + " is Incorrect: Password doesn't match retyped pwd ");	
                            $(this)
                                .next()
                                .find(".error")
                                .addClass('warning')
                                .removeClass('ok');
							$(this)
                                .next()
                                .find(".errorm")
                                .addClass('warning')
                                .removeClass('ok');	
                            $(this)
                                .next()
                                .find(".feedback")
                                .removeClass("glyphicon glyphicon-ok")
                                .addClass("glyphicon glyphicon-remove")
                                .removeClass("ok")
                                .addClass("warning");
							$("#pwreRequired")
								.removeClass("ok")
								.addClass("warning");	
                            //$(this).css("border","2px solid red");
                        } else {
                            $(this)
                                .next()
                                .find(".error")
                                .html(name + " is OK: Your data has been entered correctly " + inputstr);
                            $(this)
                                .next()
                                .find(".error")
                                .addClass('ok')
                                .removeClass('warning');
                            $(this)
                                .next()
                                .find(".feedback")
                                .removeClass("glyphicon glyphicon-remove")
                                .addClass("glyphicon glyphicon-ok")
                                .removeClass("warning")
                                .addClass("ok");
							$("#pwreRequired")
								.removeClass("warning")
								.addClass("ok");	
                            //$(this).css("border","2px solid green");
                        }
                        
                        // var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
                        // var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/;//13 or more occurences
                        
                    } else {
                        $(this)
                            .next()
                            .find(".error")
                            .html(name + " is EMPTY: Please enter data into this input");
                        $(this)
                            .next()
                            .find(".error")
                            .addClass('warning')
                            .removeClass('ok');
                        $(this)
                            .next()
                            .find(".feedback")
                            .removeClass("glyphicon glyphicon-ok")
                            .addClass("glyphicon glyphicon-remove")
                            .removeClass("ok")
                            .addClass("warning");
						$("#pwreRequired")
							.removeClass("warning")
							.addClass("ok");	
                        //$(this).css("border","2px solid red");
                    }
                    
                }
		/*	if (name === "termsConditions") {
                alert(name+'checked');
				if($(this).prop("checked") == true){
				alert(name+'checked');
				} 
				else if($(this).is(":not(:checked)")){
				alert('not checked')
				}
			} */
                //alert(name);  
            });
			
			$('.input-groupmodal')
            .on('focusin focusout input', function () {
                console.log('cnanged');
                var namem = $(this)
                    .find(".check,textarea")
                    .attr("name");
                var valuem = $(this)
                    .find(".check,textarea")
                    .val()
                    .trim();
                
                var fakeRegm = /(.)\1{2,}/;
                var emailRegm = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                var pswReglowm = /^([a-zA-Z0-9]{6,})+$/;
                var pswRegheighm = /^([a-zA-Z0-9]{13,})+$/; //13 or more occurences
                /*  */
                var $formm = $("form.modalform");
                var inputsm = $form[0].elements;
                /* The regex for ensuring that letters aren’t used, can just be a simple regex for numbers and separators.
/^[0-9 .-]+$/ */
                
            /* email */
                
                //var emailName = (email) => E-mail.split("@")[0];
            if (name === "E-mail") { 
                        if (value != "") {
                           //$(this).next().find(".error").html(name+'  is ok').removeClass("warning").addClass("ok");
                           //$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
                          
                          if(fakeReg.test(value)) {
                                $(this).next().find(".error").html(name + " is Fake text: Please remove repetition ");
                                $(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
                                $(this).next().find(".error").addClass('warning').removeClass('ok');
                                $("#emailRequired").removeClass("ok").addClass("warning");
                                //$(this).css("border","2px solid red");
                                } else {
                               if(emailReg.test(value)) {
                                    $(this).next().find(".error").html(name + " is Ok : Your data has been entered correctly ");
                                    $(this).next().find(".error").addClass('ok').removeClass('warning');
                                    $(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
                                    $("#emailRequired").removeClass("warning").addClass("ok");
                                    //$(this).css("border","2px solid green");
                               
                               } else {
                                    $(this).next().find(".error").html(name + " is Incorrect: Please enter it correctly ").removeClass('ok').addClass('warning');
                                    $(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
                                    $("#emailRequired").removeClass("ok").addClass("warning");
                                    
                                        }
                                                    }
                            } else {    
                               $(this).next().find(".error").html(name+' is empty ').removeClass("ok").addClass("warning"); 
                               $(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
                               $("#emailRequired").removeClass("ok").addClass("warning");
                            }

                    } 
                //var emailName = (email) => E-mail.split("@")[0];
             
               
                
                if (name === "Password") {
                    var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
                    var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/; //13 or more occurences
                    if (value.length > 0) {
                        /*  
                            var inputstr = $(this).val();
                            var pswstr = $(this).val();
                            var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
                            var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/;//13 or more occurences
                            */
                        // fake text    
                        //var inputstr = $(this).val();
                        //var fakeReg = /(.)\1{2,}/;
                        if (fakeReg.test(value)) {
                            $(this)
                                .next()
                                .find(".error")
                                .html(name + " is Fake text: Please remove repetition ");
                            $(this)
                                .next()
                                .find(".feedback")
                                .removeClass("glyphicon glyphicon-ok")
                                .addClass("glyphicon glyphicon-remove")
                                .removeClass("ok")
                                .addClass("warning");
                            $(this)
                                .next()
                                .find(".error")
                                .addClass('warning')
                                .removeClass('ok');
                            $("#pwdRequired")
                                .removeClass("ok")
                                .addClass("warning");   
                            //$(this).css("border","2px solid red");
                        } else {
                            //check if password and last-name is the same
                            if (value === inputs["Your City"].value) {
                                $(this)
                                    .next()
                                    .find(".error")
                                    .html(name + " is Incorrect: Password shouldn't match city name");
                                $(this)
                                    .next()
                                    .find(".error")
                                    .addClass('warning')
                                    .removeClass('ok');
                                $(this)
                                    .next()
                                    .find(".feedback")
                                    .removeClass("glyphicon glyphicon-ok")
                                    .addClass("glyphicon glyphicon-remove")
                                    .removeClass("ok")
                                    .addClass("warning");
                                $("#pwdRequired")
                                    .removeClass("ok")
                                    .addClass("warning");   
                                //$(this).css("border","2px solid red");
                            } else {
                                if (value === inputs["Last Name"].value) {
                                    $(this)
                                        .next()
                                        .find(".error")
                                        .html(name + " is Incorrect: Password shouldn't match last-name ");
                                    $(this)
                                        .next()
                                        .find(".error")
                                        .addClass('warning')
                                        .removeClass('ok');
                                    $(this)
                                        .next()
                                        .find(".feedback")
                                        .removeClass("glyphicon glyphicon-ok")
                                        .addClass("glyphicon glyphicon-remove")
                                        .removeClass("ok")
                                        .addClass("warning");
                                    $("#pwdRequired")
                                        .removeClass("ok")
                                        .addClass("warning");   
                                    //$(this).css("border","2px solid red");
                                } else {
                                    //check if password and first-name is the same
                                    if (value === inputs["First Name"].value) {
                                        $(this)
                                            .next()
                                            .find(".error")
                                            .html(name + " is Incorrect: Password shouldn't match fist-name ");
                                        $(this)
                                            .next()
                                            .find(".error")
                                            .addClass('warning')
                                            .removeClass('ok');
                                        $(this)
                                            .next()
                                            .find(".feedback")
                                            .removeClass("glyphicon glyphicon-ok")
                                            .addClass("glyphicon glyphicon-remove")
                                            .removeClass("ok")
                                            .addClass("warning");
                                        $("#pwdRequired")
                                            .removeClass("ok")
                                            .addClass("warning");   
                                        //$(this).css("border","2px solid red");
                                    } else {
                                        if (!pswReglow.test(value)) {
                                            $(this)
                                                .next()
                                                .find(".error")
                                                .html(name + " is Incorrect: Please enter at lest 6 character ");
                                            $(this)
                                                .next()
                                                .find(".feedback")
                                                .removeClass("glyphicon glyphicon-ok")
                                                .addClass("glyphicon glyphicon-remove")
                                                .removeClass("ok")
                                                .addClass("warning");
                                            $(this)
                                                .next()
                                                .find(".error")
                                                .addClass('warning')
                                                .removeClass('ok');
                                            $("#pwdRequired")
                                                .removeClass("ok")
                                                .addClass("warning");   
                                            //$(this).css("border","2px solid red");
                                        } else {
                                            if (!pswRegheigh.test(value)) {
                                                
                                                // condition to check if length is bigger than 12 char
                                                
                                                $(this)
                                                    .next()
                                                    .find(".error")
                                                    .html(name + " is OK: Your data has been entered correctly");
                                                $(this)
                                                    .next()
                                                    .find(".error")
                                                    .addClass('ok')
                                                    .removeClass('warning');
                                                $(this)
                                                    .next()
                                                    .find(".feedback")
                                                    .removeClass("glyphicon glyphicon-remove")
                                                    .addClass("glyphicon glyphicon-ok")
                                                    .removeClass("warning")
                                                    .addClass("ok");
                                                $("#pwdRequired")
                                                    .removeClass("warning")
                                                    .addClass("ok");    
                                                //$(this).css("border","2px solid green");   
                                            } else {
                                                $(this)
                                                    .next()
                                                    .find(".error")
                                                    .html(name + " is Incorrect: Please enter no more than 12 character " + inputstr);
                                                $(this)
                                                    .next()
                                                    .find(".error")
                                                    .addClass('warning')
                                                    .removeClass('ok');
                                                $(this)
                                                    .next()
                                                    .find(".feedback")
                                                    .removeClass("glyphicon glyphicon-ok")
                                                    .addClass("glyphicon glyphicon-remove")
                                                    .removeClass("ok")
                                                    .addClass("warning");
                                                $("#pwdRequired")
                                                    .removeClass("ok")
                                                    .addClass("warning");   
                                                //$(this).css("border","2px solid red");
                                            }
                                        }
                                        
                                        //$(this).next(".fielderror").html(inputattr+" is OK: Your data has been entered correctly "+inputstr);
                                        //$(this).next(".fielderror").addClass('ok').removeClass('warning');
                                    }
                                }
                            }
                            /*      */
                        }
                    } else {
                        $(this)
                            .next()
                            .find(".error")
                            .html(inputattr + " is EMPTY: Please enter data into this input");
                        $(this)
                            .next()
                            .find(".error")
                            .addClass('warning')
                            .removeClass('ok');
                        
                        $("#pwdRequired")
                            .removeClass("ok")
                            .addClass("warning");
                        //$(this).css("border","2px solid red");
                    }
                }
                /* retype password  */
                
                if (name === "Retype Password") {alert(value);
                    if (value.length > 0) {
                        if (value !== inputs.Password.value) {
						alert(name);
                            $(this)
                                .next()
                                .find(".error")
                                .html(name + " is Incorrect: Password doesn't match retyped pwd ");
                            $(this)
                                .next()
                                .find(".error")
                                .addClass('warning')
                                .removeClass('ok');
                            $(this)
                                .next()
                                .find(".feedback")
                                .removeClass("glyphicon glyphicon-ok")
                                .addClass("glyphicon glyphicon-remove")
                                .removeClass("ok")
                                .addClass("warning");
							$("#pwreRequired")
								.removeClass("ok")
								.addClass("warning");	
                            //$(this).css("border","2px solid red");
                        } else {
                            $(this)
                                .next()
                                .find(".error")
                                .html(name + " is OK: Your data has been entered correctly " + inputstr);
                            $(this)
                                .next()
                                .find(".error")
                                .addClass('ok')
                                .removeClass('warning');
                            $(this)
                                .next()
                                .find(".feedback")
                                .removeClass("glyphicon glyphicon-remove")
                                .addClass("glyphicon glyphicon-ok")
                                .removeClass("warning")
                                .addClass("ok");
							$("#pwreRequired")
								.removeClass("warning")
								.addClass("ok");	
                            //$(this).css("border","2px solid green");
                        }
                        
                        // var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
                        // var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/;//13 or more occurences
                        
                    } else {
                        $(this)
                            .next()
                            .find(".error")
                            .html(name + " is EMPTY: Please enter data into this input");
                        $(this)
                            .next()
                            .find(".error")
                            .addClass('warning')
                            .removeClass('ok');
                        $(this)
                            .next()
                            .find(".feedback")
                            .removeClass("glyphicon glyphicon-ok")
                            .addClass("glyphicon glyphicon-remove")
                            .removeClass("ok")
                            .addClass("warning");
						$("#pwreRequired")
							.removeClass("warning")
							.addClass("ok");	
                        //$(this).css("border","2px solid red");
                    }
                    
                }
		/*	if (name === "termsConditions") {
                alert(name+'checked');
				if($(this).prop("checked") == true){
				alert(name+'checked');
				} 
				else if($(this).is(":not(:checked)")){
				alert('not checked')
				}
			} */
                //alert(name);  
            });
	// terms and conditions check
       //  $('input[type="checkbox"]').click(function(){
	   $('#terms').click(function(){
            if($(this).is(":checked")){
                console.log("Checkbox is checked.");
				$("#termcheck").addClass('ok').removeClass('warning');
				$("#termsRequired").addClass('ok').removeClass('warning');
				//alert(name+'checked');
            }
            else if($(this).is(":not(:checked)")){
                console.log("Checkbox is unchecked.");
				 $("#termcheck").removeClass('ok').addClass('warning');
				 $("#termsRequired").removeClass('ok').addClass('warning');
				//alert(name+'not checked');
				// event.preventDefault();
            }
        }); 
		
       $(".btn1").click(function(){
			$('.form-group').each(function(){
			
			var $requiredField = $(this).find(".check");
				if ($requiredField.length === 0) {
					return;
				}
				if ( $(".inputstatus .warning").length != 0) {
					event.preventDefault();
				}
				var name = $requiredField.attr("name");
				var value = $requiredField.val().trim();
				
				if ( value === "") {
				$(this).find(".error").html(name + " is empty !").removeClass("ok").addClass("warning");
				$(this).find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
				$(this).find(".starrq").removeClass("ok").addClass("warning");
				$("#termcheck").removeClass('ok').addClass('warning');
				$("#termsRequired").removeClass('ok').addClass('warning');
				event.preventDefault();
				//$(this).find(".starrq").removeClass("ok").addClass("warning");
				}
				if($("#terms").is(":checked")){
				//alert(' checked');
					console.log("Checkbox is checked.");
					$("#termcheck").addClass('ok').removeClass('warning');
					$("#termsRequired").addClass('ok').removeClass('warning');
					//alert(name+'checked');
				}
				else if($("#terms").is(":not(:checked)")){
				//alert('not checked');
				event.preventDefault();
					console.log("Checkbox is unchecked.");
					 $("#termcheck").removeClass('ok').addClass('warning');
					 $("#termsRequired").removeClass('ok').addClass('warning');
					//alert(name+'not checked');
					// event.preventDefault();
				}
			 
			  //alert(inputattr);
			});
		});
        /* document ready end */
		     
        $(".btn2").click(function () {
            //console.log(' $(this).find(".check,textarea")
                            //.attr("name")');
        /*  */  /*  */        /*     */
                                            
                $(".form-group").each(function() {
                        var $requiredField = $(this).find(".check,check2");
                            if ($requiredField.length === 0) {
                                return;
                            }
                        if ( $(".inputstatus .warning").length != 0) {
                            event.preventDefault();
                        }   
                            var name = $requiredField.attr("name");
                            var value = $requiredField.val().trim();
                         if (value == "") {
                            $(this).find(".error").html(name).removeClass("warning").addClass("ok");
                            $(this).find(".feedback").removeClass("glyphicon glyphicon-ok").removeClass("glyphicon glyphicon-remove").removeClass("warning");
                            $(this).find(".starrq").removeClass("warning").addClass("ok");
						    $("#termcheck").removeClass('ok').addClass('warning');
				            $("#termsRequired").removeClass('ok').addClass('warning');
                        } else {
							$(this).find(".error").html(name).removeClass("warning").addClass("ok");
                            $(this).find(".feedback").removeClass("glyphicon glyphicon-ok").removeClass("glyphicon glyphicon-ok").removeClass("ok");
                            $(this).find(".starrq").removeClass("warning").addClass("ok");
							$("#termcheck").addClass('ok').removeClass('warning');
				            $("#termsRequired").addClass('ok').removeClass('warning');
						}
                    
                });
            });
        /* document ready end */
    });

        </script>
   
    
     <script>
        /* */
        
        $(".inputboxmodal1").on("focusin focusout input", function() {
             console.log("changed");   
    
             var inputattr = $(this)
                          .find(".input-check")
                          .attr("name");
             // Get the Login Name value and trim it
             var inputstr = $(this)
                          .find(".input-check")
                          .val()
                          .trim();
             var fakeReg = /(.)\1{2,}/;
             var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
             var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
             var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/;//13 or more occurences
             
            // var $form = $("form.register");
            // var inputs = $form[0].elements;
                
       //alert(inputattr+inputstr);
        if (inputstr != "") {
               $(this).find(".error").html(inputattr+'  is ok').removeClass("warning").addClass("ok");
               $(this).find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
              
              if(fakeReg.test(inputstr)) {
                    $(this).find(".error").html(inputattr + " is Fake text: Please remove repetition ");
                        $(this).find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
                        $(this).find(".error").addClass('warning').removeClass('ok');
                        //$(this).css("border","2px solid red");
                    } else {    
               //$(this).find(".error").html(inputattr+'  is ok');
               /* E-mail filter */
                        if (inputattr === "E-mail") {   
                               if(emailReg.test(inputstr)) {
                                    $(this).find(".error").html(inputattr + " is Ok : Your data has been entered correctly ");
                                    $(this).find(".error").removeClass('warning').addClass('ok');
                                    $(this).find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
                                    //$(this).css("border","2px solid green");
                               
                               } else {
                                    $(this).find(".error").html(inputattr + " is Incorrect: Please enter it correctly ").addClass('warning').removeClass('ok');
                                    $(this).find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
                                    //$(this).find(".error");
                                    //$(this).css("border","2px solid red");
                               }
                 /* Password filter */             
                                                    }
                                                    
                        if (inputattr === "Password") {
                            if(fakeReg.test(inputstr)) {
                                $(this).find(".error").html(inputattr + " is Fake text: Please remove repetition ");
                                $(this).find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
                                $(this).find(".error").addClass('warning').removeClass('ok');
                                //$(this).css("border","2px solid red");
                                } else {
                                    if (!pswReglow.test(inputstr)) {
                                        $(this).find(".error").html(inputattr + " is Incorrect: Please enter at lest 6 character ");
                                        $(this).find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
                                        $(this).find(".error").addClass('warning').removeClass('ok');
                                        //$(this).css("border","2px solid red");
                                        } else {
                                            if (!pswRegheigh.test(inputstr)) {
                                    
                                             // condition to check if length is bigger than 12 char
                                                
                                                $(this).find(".error").html(inputattr+" is OK: Your data has been entered correctly");
                                                $(this).find(".error").addClass('ok').removeClass('warning');
                                                $(this).find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
                                                //$(this).css("border","2px solid green");   
                                                 } else {
                                                    $(this).find(".error").html(inputattr + " is Incorrect: Please enter no more than 12 character "+inputstr);
                                                    $(this).find(".error").addClass('warning').removeClass('ok');    
                                                    $(this).find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
                                                    //$(this).css("border","2px solid red");
                                                    }
                                               }
                                                         
                                        }                            
                                    }                   
                            }     
            } else{ 
               $(this).find(".error").html(inputattr+'is empty').removeClass("ok").addClass("warning"); 
               $(this).find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
                
            }
            
        })
        /* modal check*/
            $(".button1color1").click(function() {
                  $(".inputboxmodal1").each(function() {
                    var st = $(this)
                      .find(".input-check")
                      .attr("name");
                    var st2 = $(this)
                      .find(".input-check")
                      .val()
                      .trim();
                    if (
                      $(this)
                        .find(".input-check")
                        .val()
                        .trim() != ""
                    ) {
                      //$($(this).nextAll(".inputstatus")).find(".fielderror").text("Your " + st + " is OK ");
                      //$(this).find(".fielderror").text("Your " + st + " is OK ");
                      $(this)
                        //.next()
                        .find(".error")
                        .html("Your " + st + " is OK ");
                      $(this)
                        .find(".error")
                        .css("color", "green");
                      
                      $(this)
                        //.next()
                        .find(".feedback")
                        //.html("Your " + st + " is OK ")
                        .removeClass("glyphicon glyphicon-remove")
                        .addClass("glyphicon glyphicon-ok ok");
                      $(this)
                        //.next()
                        .find(".error")
                        .removeClass("warning")
                        .addClass("ok");
                     
                      //alert(st2);
                    } else {
                      //$($(this).nextAll(".inputstatus")).find(".fielderror").text("Your " + st + " is empty");
                      $(this)
                        //.next()
                        .find(".error")
                        .html("Your " + st + " is empty ");
                      $(this)
                        .find(".error")
                        //.css("background-color", "pink");
                        .css("color", "red");
                      $(this)
                        //.next()
                        .find(".feedback")
                        .removeClass("glyphicon glyphicon-ok ok")
                        .addClass("glyphicon glyphicon-remove warning");
                      $(this)
                        //.next()
                        .find(".error")
                        .removeClass("ok")
                        .addClass("warning");

                      event.preventDefault();
                    }

                    //alert("The " + st +  " was clicked. it is " + st2);
                  });
            });
			/**/
            $(".button1color").click(function() {
                  $(".inputboxmodal1").each(function() {
                    var st = $(this)
                      .find(".input-check")
                      .attr("name");
                    var st2 = $(this)
                      .find(".input-check")
                      .val()
                      .trim();
                    if (
                      $(this)
                        .find(".input-check")
                        .val()
                        .trim() != ""
                    )  {
                      //$($(this).nextAll(".inputstatus")).find(".fielderror").text("Your " + st + " is OK ");
                      //$(this).find(".fielderror").text("Your " + st + " is OK ");
                      $(this)
                        //.next()
                        .find(".error")
                        .html("Your " + st);
                      $(this)
                        .find(".error")
                        .css("color", "green");
                      
                      $(this)
                        //.next()
                        .find(".feedback")
                        //.html("Your " + st + " is OK ")
                        //.removeClass("glyphicon glyphicon-remove warning")
                          .removeClass("glyphicon glyphicon-ok ok");
                      $(this)
                      //  .next()
                        .find(".error")
                        .removeClass("warning")
                        .addClass("ok");
                     
                      //alert(st2);
                    } else {
                      //$($(this).nextAll(".inputstatus")).find(".fielderror").text("Your " + st + " is empty");
                      $(this)
                        //.next()
                        .find(".error")
                        .html("Your " + st);
                      $(this)
                        .find(".error")
                        //.css("background-color", "pink");
                        .css("color", "green");
                      $(this)
                        //.next()
                        .find(".feedback")
                        .removeClass("glyphicon glyphicon-remove")
                        //.addClass("glyphicon glyphicon-remove warning");
                     // $(this)
                        //.next()
                     //   .find(".error")
                        //.removeClass("ok")
                     //   .addClass("ok");

                     // event.preventDefault();
                    }

                    //alert("The " + st +  " was clicked. it is " + st2);
                  });
            });
      
        </script>
        
        <script>
        $(".inputboxmodal2").on("focusin focusout input", function() {
             console.log("changed");
    
             var inputattr = $(this)
                          .find(".input-check")
                          .attr("name");
             // Get the Login Name value and trim it
             var inputstr = $(this)
                          .find(".input-check")
                          .val()
                          .trim();;
             var value  = inputstr;       
            //alert(inputstr);
             var fakeReg = /(.)\1{2,}/;
             var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
             var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
             var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/;//13 or more occurences
             
             var $form = $("form.register");
             var inputs = $form[0].elements;
        
       //alert(inputattr+inputstr);
        if (inputstr != "") {
               $(this).find(".error").html(inputattr+'  is ok').removeClass("warning").addClass("ok");
               $(this).find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
              
              if(fakeReg.test(inputstr)) {
                        $(this).find(".error").html(inputattr + " is Fake text: Please remove repetition ");
                        $(this).find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
                        $(this).find(".error").addClass('warning').removeClass('ok');
                        //$(this).css("border","2px solid red");
                    } else {
                 /* E-mail*/
                        if (inputattr === "E-mail") {   
                               if(emailReg.test(inputstr)) {
                                    $(this).find(".error").html(inputattr + " is Ok : Your data has been entered correctly ");
                                    $(this).find(".error").addClass('ok').removeClass('warning');
                                    $(this).find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
                                    //$(this).css("border","2px solid green");
                               
                               } else {
                                    $(this).find(".error").html(inputattr + " is Incorrect: Please enter it correctly ").removeClass('ok').addClass('warning');
                                    $(this).find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
                                    //$(this).find(".error");
                                    //$(this).css("border","2px solid red");
                                        }
                                                    }
                            }                         
                /*Password  */        
                        if (inputattr === "Password") {
                            
                            if(fakeReg.test(inputstr)) {
                                $(this).find(".error").html(inputattr + " is Fake text: Please remove repetition ");
                                $(this).find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
                                $(this).find(".error").addClass('warning').removeClass('ok');
                                //$(this).css("border","2px solid red");
                                } else {
                                    if (!pswReglow.test(inputstr)) {
                                        $(this).find(".error").html(inputattr + " is Incorrect: Please enter at lest 6 character ");
                                        $(this).find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
                                        $(this).find(".error").addClass('warning').removeClass('ok');
                                        //$(this).css("border","2px solid red");
                                        } else {
                                            if (!pswRegheigh.test(inputstr)) {
                                    
                                             // condition to check if length is bigger than 12 char
                                                
                                                $(this).find(".error").html(inputattr+" is OK: Your data has been entered correctly");
                                                $(this).find(".error").addClass('ok').removeClass('warning');
                                                $(this).find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
                                                //$(this).css("border","2px solid green");   
                                                 } else {
                                                    $(this).find(".error").html(inputattr + " is Incorrect: Please enter no more than 12 character "+inputstr);
                                                    $(this).find(".error").addClass('warning').removeClass('ok');
                                                    $(this).find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
                                                    //$(this).css("border","2px solid red");
                                                    }
                                               }
                                        }
                                    }   
                                        
                                  //  console.log("inputattr at password retype : ", inputattr);  
                        if (inputattr === "Password Retype") {
									//alert(inputattr);
										//if (inputstr.length > 0) {
										   if (inputstr !== inputs.Password.value)  {
												$(this).find(".error").html(inputattr + " is Incorrect: Password doesn't match retyped password ");
												$(this).find(".error").addClass('warning').removeClass('ok');
												$(this).find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
												//$(this).css("border","2px solid red");
												} else {
												$(this).find(".error").html(inputattr+" is OK: Your data has been entered correctly "+inputstr);
												$(this).find(".error").addClass('ok').removeClass('warning');
												$(this).find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
												//$(this).css("border","2px solid green");
												}			
											 
											  								  
											 // var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
											 // var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/;//13 or more occurences
													
										/*   }else{
												$(this).find(".error").html(inputattr+" is EMPTY: Please enter data into this input");
												$(this).find(".error").addClass('warning').removeClass('ok');
												$(this).find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
												//$(this).css("border","2px solid red");
											} */
											
										}
                          
            } else {    
               $(this).find(".error").html(inputattr+' is empty').removeClass("ok").addClass("warning");    
               $(this).find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
                
            }
        /*          */
            });
            
            $(".button1color2").click(function() {
                  $(".inputboxmodal2").each(function() {
                    var st = $(this)
                      .find(".input-check")
                      .attr("name");
                    var st2 = $(this)
                      .find(".input-check")
                      .val()
                      .trim();
                    if (
                      $(this)
                        .find(".input-check")
                        .val()
                        .trim() != ""
                    ) {
                      //$($(this).nextAll(".inputstatus")).find(".fielderror").text("Your " + st + " is OK ");
                      //$(this).find(".fielderror").text("Your " + st + " is OK ");
                      $(this)
                        //.next()
                        .find(".error")
                        .html("Your " + st + " is OK ");
                      $(this)
                        .find(".error")
                        .css("color", "green");
                      
                      $(this)
                        //.next()
                        .find(".feedback")
                        //.html("Your " + st + " is OK ")
                        .removeClass("glyphicon glyphicon-remove warning")
                        .addClass("glyphicon glyphicon-ok ok");
                      $(this)
                        .next()
                        .find(".error")
                        .removeClass("warning")
                        .addClass("ok");
                     
                      //alert(st2);
                    } else {
                      //$($(this).nextAll(".inputstatus")).find(".fielderror").text("Your " + st + " is empty");
                      $(this)
                        //.next()
                        .find(".error")
                        .html("Your " + st + " is empty ");
                      $(this)
                        .find(".error")
                        //.css("background-color", "pink");
                        .css("color", "red");
                      $(this)
                        //.next()
                        .find(".feedback")
                        .removeClass("glyphicon glyphicon-ok ok")
                        .addClass("glyphicon glyphicon-remove warning");
                      $(this)
                        //.next()
                        .find(".error")
                        .removeClass("ok")
                        .addClass("warning");

                      event.preventDefault();
                    }

                    //alert("The " + st +  " was clicked. it is " + st2);
                  });
				  
            });

        $(".button2color").click(function() {
                  $(".inputboxmodal2").each(function() {
                    var st = $(this)
                      .find(".input-check")
                      .attr("name");
                    var st2 = $(this)
                      .find(".input-check")
                      .val()
                      .trim();
                    if (
                      $(this)
                        .find(".input-check")
                        .val()
                        .trim() != ""
                    )  {
                      //$($(this).nextAll(".inputstatus")).find(".fielderror").text("Your " + st + " is OK ");
                      //$(this).find(".fielderror").text("Your " + st + " is OK ");
                      $(this)
                        //.next()
                        .find(".error")
                        .html("Your " + st);
                      $(this)
                        .find(".error")
                        .css("color", "green");
                      
                      $(this)
                        //.next()
                        .find(".feedback")
                        //.html("Your " + st + " is OK ")
                        //.removeClass("glyphicon glyphicon-remove warning")
                          .removeClass("glyphicon glyphicon-ok ok");
                      $(this)
                        .next()
                        .find(".error")
                        .removeClass("warning")
                        .addClass("ok");
                     
                      //alert(st2);
                    } else {
                      //$($(this).nextAll(".inputstatus")).find(".fielderror").text("Your " + st + " is empty");
                      $(this)
                        //.next()
                        .find(".error")
                        .html("Your " + st);
                      $(this)
                        .find(".error")
                        //.css("background-color", "pink");
                        .css("color", "green");
                      $(this)
                        //.next()
                        .find(".feedback")
                        .removeClass("glyphicon glyphicon-remove")
                        //.addClass("glyphicon glyphicon-remove warning");
                      $(this)
                        //.next()
                        .find(".error")
                        //.removeClass("ok")
                        .addClass("ok");

                     // event.preventDefault();
                    }

                    //alert("The " + st +  " was clicked. it is " + st2);
                  });
            });

              
            
!
999px

Console