.btn-color{
    background-color:#030749;
    ;
}
.text-color{
    color: #030749;
}

.bg-light-cream{
    background-color:rgba(255, 151, 0, .2);
} 
.icon-overlap li+li {
    margin-right: -14px;
}
a.btn.btn-back {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    padding: 0px !important;
}
.secondary-text{
    color: rgba(3, 7, 73, 0.4);
}
#first, #sec, #third, #fourth, #fifth{
    width: 50px;
}

.form-title{
    margin-top: 100px;
}

.tooltip-inner {
    background-color: #030749!important;
    /*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
    color: #fff;
  }
  
  .tooltip.top .tooltip-arrow {
    border-top-color: #030749;
  }
  
  .tooltip.right .tooltip-arrow {
    border-right-color: #030749;
  }
  
  .tooltip.bottom .tooltip-arrow {
    border-bottom-color: #030749;
  }
  
  .tooltip.left .tooltip-arrow {
    border-left-color:#030749;
  }
  .bs-tooltip-auto[x-placement^=top] .arrow::before,
.bs-tooltip-top .arrow::before {
  border-top-color: #030749;
  /* Red */
}

@media only screen and (max-width: 1024px){
    .form-title{
        margin-top: 26px;
    }
    label{
        margin-bottom:0px ;
    }
    #sec, #third, #fourth, #fifth{
        margin-left: 3px;
    }
}

@media only screen and (min-width: 1024px) {
    .first-col, .second-col{
        height: 100vh;
    }
  }