body{
    font-family: Poppins;
    font-style: normal;
    font-weight: bold;
    background-color: #F4F4F5;
    color:black;
    }
    p,label{
        font-weight:normal;
        font-size:12px;
    }
    
    div.loan-amount,div.loan-tenor{
    background-color: #D8DCF3;
    color:black;
    padding:30px;
    border-radius:7px;
    
    }
    
    input.inp,select.sel{
    
        background-color:#F4F4F5;
    }
    
    form.loan input,form.loan select,form.loan textarea{
        background-color:#F4F4F5;
        border:none;
    
    }
    
    ul.progressbar li { 
        display:inline;
        margin-right:10px;
    }
    
    #msform {
        text-align: center;
        position: relative;
        margin-top: 20px
    }
    
    
    #progressbar {
        margin-bottom: 30px;
        overflow: hidden;
        color: lightgrey
    }
    
    #progressbar .active {
        color: #000000
    }
    
    #progressbar li {
        list-style-type: none;
        font-size: 12px;
        width: 25%;
        float: left;
        position: relative;
        color:#000000;
        font-weight:normal;
    }

    div.form-group{

        font-weight:normal;
    }
    
    #progressbar #account:before {
        font-family: FontAwesome;
        content: "1"
    }
    
    #progressbar #personal:before {
        font-family: FontAwesome;
        content: "2"
    }
    
    #progressbar #payment:before {
        font-family: FontAwesome;
        content: "3"
    }

    #progressbar #director:before {
        font-family: FontAwesome;
        content: "3"
    }
    
    #progressbar #confirm:before {
        font-family: FontAwesome;
        content: "4"
    }
    
    #progressbar li:before {
        width: 50px;
        height: 50px;
        line-height: 45px;
        display: block;
        font-size: 18px;
        color: #ffffff;
        background:#B8BCD6;
        border-radius: 50%;
        margin: 0 auto 10px auto;
        padding: 2px
    }
    
 
    
    #progressbar li.active:before,
    #progressbar li.active:after {
        background:#000080;
    }
    
    
    /** 
    for mobile phones and small devices */
    
    
    @media (max-width: 576px) {
    
    div.form-grid{
    
        margin-left:40px;
        margin-right:30px;
        margin-bottom:30px;
        padding:10px;
    }
    
    #slider1,#slider2 {
    
        margin-top:10px;
    }
    
    span.tenor,span.loanAmnt{
    
        margin-top:5px;
        
    }
    
    h5.loanCalcHeader,h5.formHeader{
        text-align:center;
    
    }
    p.formNote{
        width:100%;
        text-align:center;
        margin:auto;
        margin-bottom:10px;
    }
    h2.heading-text{
        margin:10%;
        
    }
    
    div.form-step{
    
        margin-top:-10%;
    }
    
    }
    
    /** 
    for medium screens to extra large screens */
    @media (min-width: 768px) and (max-width: 1300px) {
    
      ul  li a {
    
    color:blue;
    font-weight:bold;
    
    
    } 
    
    a.logo{
    
        position:relative;
        left:5%;
    }
    
    ul.navi-list{
    position:relative;
    right:10%;
    }
    
    h2.heading-text{
    position:relative;
    left: 5%;
    
    }
    
    
    div.wizard{
    
        width:55%;
        position:relative;
        left:45%;
        top:-70px;
    
    }
    
    h2.heading-text{
        color:#2C3C90;
         margin-left:-50px;
          margin-top:55px;
        
    }
    
    div.content{
        margin-top:-60px;
    
    }
    
    }