/*------------------------------------------------------------------

Template Name: LoanFormic - Ajax Based Loan Application Form
Template Description: LoanFormic is a Multistep Responsive Loan Application Form. It's Bootstrap based PHP form with Ajax support. It can be easily customized as it is well documented and developed using latest web technologies. This form will be a perfect choice for all Loan Industry based websites.
Version: 1.0
Author: BootPeople

* This file contains the styling for this Plugin. If you want to change any style of the theme, just edit from here. But, before editing anything, please make sure that you have proper css knowledge. Also, if you want to edit style of responsive version, then please edit the responsive.css file available at assets/css/responsive.css

-------------------------------------------------------------------*/
/*------------------------------------------------------------------

[TABLE OF CONTENTS]

	1. Global Styles
    2. Form Styles

-------------------------------------------------------------------*/

/*-----------------------------
 1. Global Styles 
-------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Playfair+Display:700');

* {
  box-sizing: border-box;
}

body {
    color: #333333;
    background: #21275a;
    background-size:cover;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.8;
}

h1, h2, h3, h4, h5, h6 {
    color: #21275a;
    font-family: 'Playfair Display', serif;
}

input.invalid {
  background-color: #ffdddd;
}

/*-----------------------------
 2. Form Styles 
-------------------------------*/

/* 2.1 Form Content Area Related CSS */

.loanFormic-content-block {
  background:#ffffff;
  border: 1px solid #ccc;
  margin: 3% auto;
  padding: 2% 4% 5%;
  width: 80%;
}

.loanFormic-content-block .text-success {
    border: 1px solid #E7272D;
    color: #21275a;
    font-size: 16px;
    padding: 15px 25px;
    line-height: 1.2;
}

.loanFormic-content-block .text-danger {
    border: 1px solid #E7272D;
    font-size: 16px;
    padding: 15px 25px;
    line-height: 1.2;
}

.loan-text {
    float: right;
    font-size: 20px;
    font-weight: 700;
}

.tab {
  display: none;
}

.top-area {
  border-bottom: 1px dashed #ccc;
  margin-bottom: 25px;
  padding-bottom: 20px;
}

/* 2.2 Form Input Related CSS */

.main-form-area .fa {
    padding-right:10px;
}

.main-form-area input {
    border-radius: 0px;
    height: 45px;
    padding: 10px;
    width: 100%;
}

.main-form-area label {
    font-weight:bold;
    text-transform: uppercase;
}

.main-form-area select {
    box-sizing: border-box;
    font-family: FontAwesome, sans-serif;
    height: 45px;
    max-width: 100%;
    min-width: 100%;
    outline: none;
    padding: 10px 15px;
    padding-left: 15px;
    text-indent: 0.01px;
    text-overflow: "";
    width: 100%;
}

.main-form-area textarea {
    border-radius: 0px;
    padding: 10px;
    width: 100%;
}

.slider {
    border-radius: 5px;
    height: 10px;
    opacity: 0.8;
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
    -webkit-appearance: none;
    width: 100%;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: url('assets/img/dot.png');
    border: 0;
    cursor: pointer;
    height: 25px;
    width: 25px;
}

.slider::-moz-range-thumb {
    background: url('assets/img/dot.png');
    border: 0;
    height: 25px;
    cursor: pointer;
    width: 25px;
}

/* 2.3 Form Button Related CSS */

.button-area {
    float:right;
    overflow:auto;
}

.button-area button {
  background-color: #21275a;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 17px;
  margin: 10px auto 0;
  padding: 8px 20px 10px;
}

.button-area button:hover {
  opacity: 0.8;
}

.form-step-button {
    margin-top:40px;
    text-align:center;
}

#prevBtn {
  background-color: #bbbbbb;
}

.step {
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  height: 15px;
  margin: 0 2px;
  opacity: 0.5;
  width: 15px;
}

.step.active {
  opacity: 1;
}

.step.finish {
  background-color: #21275a;
}