* {margin: 0; padding: 0; box-sizing: border-box;}

body {font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: #555555;}

.container {display: block; margin: 0 auto; width: 92%; max-width: 1196px;}
.container::after {content: ''; display: block; clear: both;}

header {display: block; background: url(../../images/HeaderBg.png) center repeat-x; background-size: auto 100%;}
header .logo {display: inline-block; margin: 10px 0;}

.midWrap {display: block; padding-bottom: 32px;}
.midWrap .logout {display: block; height: 32px;}
.midWrap .logout::after {content: ''; display: block; clear: both;}
.midWrap .logout a {display: inline-block; float: right; padding: 0 20px; font-size: 12px; text-transform: uppercase; line-height: 28px; margin: 2px 4px; background: #f6821f; color: #fff; text-decoration: none;}

.loginSec {display: block; width: 100%; background-image: linear-gradient(to bottom right, #f6821f, #a92229); padding: 38px 30px; color: #fff;}
.loginSec::after {content: ''; display: block; clear: both;}
.loginSec .login {display: block; float: right; width: 374px; background: #fff; border-radius: 8px;}
.loginSec .instruction {display: block; float: left; width: calc(100% - 374px - 32px); margin-right: 32px;}
.loginSec .instruction h2 {font-size: 36px; font-weight: normal; margin-bottom: 12px;}
.loginSec .instruction ul {display: block;}
.loginSec .instruction ul li {display: block; margin-top: 8px; background: #fff; border-radius: 8px; font-weight: 700; color: #555555; overflow: hidden;}
.loginSec .instruction ul li:nth-child(1) {margin-top: 0;}
.loginSec .instruction ul li span.no {display: inline-block; vertical-align: middle; line-height: 72px; width: 52px; text-align: center; font-size: 24px; background: #0d538e; color: #fff;}
.loginSec .instruction ul li .txt {display: inline-block; vertical-align: middle; width: calc(100% - 52px - 8px - 10px); margin-left: 10px; padding-right: 20px;}

.loginSec .login {padding: 20px 32px; height: 400px;}
.loginSec .login h3 {font-size: 22px; color: #c01012; font-weight: normal; margin-bottom: 20px;}
.loginSec .login .field {display: block; margin-bottom: 20px;}

.loginSec .login .field input[type=text], .loginSec .login .field input[type=password] {display: block; height: 40px; border: 1px solid #555555; width: 100%; border-radius: 4px; padding: 0 4px; font-size: 18px;}
.loginSec .login .submit {text-align: center;}
.loginSec .login .submit input[type=submit] {display: inline-block; height: 40px; background: #0d538e; color: #fff; text-transform: uppercase; border: 0; cursor: pointer; width: 200px;}
.loginSec .login .field label {display: block; color: #555555; margin-bottom: 4px;}
.loginSec .login .field .showotp label {display: inline-block; vertical-align: middle;}
.loginSec .login .showotp {display: block;}
.loginSec .login .showotp::after {content: ''; display: block; clear: both;}
.loginSec .login .showotp input[type=checkbox] {display: none;}
.loginSec .login .showotp input[type=checkbox]~label {display: inline-block; padding-left: 24px; position: relative; font-size: 14px; line-height: 20px;}
.loginSec .login .showotp input[type=checkbox]~label::before {content: ''; display: block; width: 16px; height: 16px; border: 1px solid #555555; position: absolute; top: 0; left: 0;}
.loginSec .login .showotp input[type=checkbox]:checked~label::after {content: ''; display: block; width: 12px; height: 12px; position: absolute; top: 3px; left: 3px; background: url(../../images/tick.png) center no-repeat; background-size: 12px auto;}
.loginSec .login .showotp .resend {display: inline-block; float: right; text-align: right; font-size: 14px;}
.loginSec .login .showotp .resend .timer {display: block; color: #c01012; margin-bottom: 4px;}
.loginSec .login .showotp .resend a {display: block; color: #c01012; text-decoration: none;}

.hide {display: none;}

.congratulation {display: block; background-image: linear-gradient(to bottom right, #f6821f, #a92229); padding: 30px 32px; color: #fff;}
.congratulation span.icon {display: inline-block; vertical-align: middle;}
.congratulation .txt {display: inline-block; width: calc(100% - 185px - 8px - 32px); margin-left: 32px; vertical-align: middle;}
.congratulation .txt h2 {font-size: 36px; font-weight: normal; margin-bottom: 8px;}
.congratulation .txt p {font-size: 20px;}

.loanDetail {display: block; padding: 20px 32px;}
.loanDetail h3 {font-size: 22px; color: #c01012; font-weight: normal; margin-bottom: 12px;}
.loanDetail .detailsbox {display: block; width: 100%; padding: 20px 10px; background: #fcfcfc; border-radius: 8px; margin-bottom: 32px;}
.loanDetail .detailsbox .box {display: inline-block; width: calc(25% - 4px); vertical-align: top; padding: 0 20px; border-left: 2px solid #f9f9f9;}
.loanDetail .detailsbox .box:nth-child(1) {border-left: 0;}
.loanDetail .detailsbox .box .icon {display: inline-block; width: 52px; vertical-align: middle;}
.loanDetail .detailsbox .box .icon img {width: 100%;}
.loanDetail .detailsbox .box .txt {display: inline-block; width: calc(100% - 52px - 8px - 12px); margin-left: 12px; text-align: left; vertical-align: middle;}
.loanDetail .detailsbox .box .txt .head {display: block; margin-bottom: 4px; font-size: 16px; color: #a92229;}
.loanDetail .detailsbox .box .txt .info {display: block; font-size: 24px; color: #063b6d; font-weight: bold;}

.otherDetails {display: block; margin-bottom: 32px;}
.otherDetails::after {content: ''; display: block; clear: both;}
.otherDetails .box {display: inline-block; width: 25%; float: left;}
.otherDetails .box .head {display: block; padding: 10px 20px; background: #fcfcfc;}
.otherDetails .box .head span {font-size: 12px;}
.otherDetails .box .info {display: block; padding: 10px 20px; border-bottom: 2px solid #fcfcfc; font-size: 20px; color: #063b6d; font-weight: bold;}

.disAmt {display: block; text-align: center; margin-bottom: 32px;}
.disAmt .box {display: block; width: 100%; max-width: 500px; border-radius: 8px; margin: 0 auto; padding: 20px 20px; background-image: linear-gradient(to right, #f6821f, #a92229);  color: #fff;}

.disAmt .box .icon {display: inline-block; width: 73px; vertical-align: middle;}
.disAmt .box .icon img {width: 100%;}
.disAmt .box .txt {display: inline-block; max-width: calc(100% - 73px - 8px - 20px); margin-left: 20px; text-align: left; vertical-align: middle;}
.disAmt .box .txt .head {display: block; margin-bottom: 4px; font-size: 16px;}
.disAmt .box .txt .info {display: block; font-size: 24px; font-weight: bold;}

.steps {display: block; padding: 20px 32px; background: #fcfcfc; margin: 0 0 32px;}
.steps h4 {font-size: 28px; color: #962a1e; font-weight: normal; margin: 0 0 12px;}
.steps ul {display: block;}
.steps ul li {display: block; margin-bottom: 8px;}
.steps ul li span {display: inline-block;}
.steps ul li span.txt {display: inline-block; width: calc(100% - 24px - 8px - 8px); margin-left: 8px; font-weight: bold; vertical-align: top; padding-top: 4px;}
.steps ul li span.no {display: inline-block; width: 24px; height: 24px; border-radius: 50%; background: #e67817; color: #fff; font-size: 18px; line-height: 24px; text-align: center; vertical-align: top;}

.initiate {display: block; text-align: center;}
.initiate .btn {display: inline-block; line-height: 46px; text-transform: uppercase; background: #063b6d; color: #fff; border: 0; cursor: pointer; text-decoration: none; padding: 0 32px;}

.loginSec .login .field.error input[type=text], .loginSec .login .field.error input[type=password] {border: 1px solid red;}
.loginSec .login .field.error .errm {font-size: 12px; font-weight: bold; display: block; color: red; padding-top: 2px;}

.alert {display: block; text-align: center; background: #fcfcfc; padding: 200px 20px; font-weight: bold;}
.alert h3 {font-size: 32px; font-weight: normal;}