@charset "utf-8";
/* CSS Document - LP7 Application & Signature Page Styles */

/*----------------
RESET CSS
-----------------*/
body {
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    padding:0;
    background:#fff;
    color:#000000;
    text-align:center;
    font-family: 'DM Sans';
    font-weight: normal;
}
div, ul, h1, h2, h3, h4, h5, li, p, img, form, input, textarea {margin:0;padding:0;}
header, section, footer, aside, nav, main, article, figure {display: block;}
table, tr, td {border:0;}
a{outline: none; color:inherit; text-decoration:none;}
a:hover {}
img {border:none; height:auto;}
li {list-style:none;}
*{box-sizing:border-box;}
.img-full{max-width:100%;}
.clearall{
    clear:both;
    font-size:1px;
    line-height:1px;
    height:1px;
}
.forMob,.forTab{ display:none ;}
.fl{ float:left;}
.fr{ float:right;}

/*-----------------------
MAIN CSS START
------------------------*/
.container {
    width:1170px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

/*============================
        HEADER CSS
=============================*/
.header{
    float:left;
    width:100%;
    height:75px;
    background:#fff;
    -webkit-box-shadow: 0 3px 4px 0 rgba(0,0,0,0.1);
    box-shadow: 0 3px 4px 0 rgba(0,0,0,0.1);
}
.logo{
    float:left;
    margin-top:18px;
    width:163px;
}
.header_call{
    float:right;
    font-size:20px;
    line-height:26px;
    color:#255daa;
    font-weight:800;
    font-family: 'Figtree';
    margin-top:25px;
}
.call_icon{
    display:inline-block;
    vertical-align:middle;
    margin:-3px 10px 0 0;
    width:17px;
}


/*======QUIZ SECTION==================*/
.quiz_section{
    float:left;
    width:100%;
    padding:45px 0 60px;
    background:#f2faff;
}
.quiz__hdg{
    font-size:30px;
    line-height:38px;
    font-weight:bold;
}
.quiz-inr-box{
    display:inline-block;
    vertical-align:top;
    width:100%;
    max-width:630px;
    position:relative;
}
/*---------------- BREADCRUMB --------------*/
.breadcrumb{
    display:inline-block;
    vertical-align:top;
    max-width:550px;
    width:100%;
    margin-top:30px;
}
.breadcrumb_top{
    display:flex;
    display:-webkit-flex;
    align-items:center;
    -webkit-align-items:center;
}
.breadcrumb_icon{
    width:30px;
    height:30px;
    border-radius:50%;
    background:#cacaca;
    flex-shrink:0;
}
.breadcrumb_line{
    flex:1;
    margin:0 10px;
    height:5px;
    background:#cacaca;
    border-radius:100px;
    overflow:hidden;
}
ul.breadcrumb_list{
    display:flex;
    display:-webkit-flex;
    justify-content:space-between;
    -webkit-justify-content:space-between;
    margin-top:10px;
}
ul.breadcrumb_list li{
    display:flex;
    display:-webkit-flex;
    flex-direction:column;
    flex:1;
    text-align:center;
    font-size:17px;
    line-height:20px;
    font-weight:500;
}
ul.breadcrumb_list li:first-child{
    text-align:left;
}
ul.breadcrumb_list li:last-child{
    text-align:right;
}
ul.breadcrumb_list li span{
    display:block;
    margin:0 0 5px;
}
ul.breadcrumb_list li p{
    font-size:15px;
    line-height:18px;
    font-weight:500;
    color:#9d9d9d;
    margin-top:auto;
}
.breadcrumb_icon.active{
    border:1px solid #255daa;
    background:#fff;
    padding:5px;
}
.breadcrumb_icon.active span{
    background:#255daa;
    width:100%;
    height:100%;
    display:block;
    border-radius:50%;
}

.breadcrumb_line.active span{width:50%; background:#255daa; height:100%; float:left; transition: all .8s;}
ul.breadcrumb_list li.active p{color:#255daa;}

.breadcrumb_icon.compte{border:1px solid transparent; background:#05ac0d; padding:5px; transition: all .1s;}
.breadcrumb_icon.compte span{
    /* background:url(/images/lp7/cong-tick.png) center center no-repeat; */
    background-size:100%;
    filter: brightness(0) invert(1);
    height:100%;
    width:100%;
    display:block;
}

.breadcrumb_line.compte span{background:#05ac0d; width:100%; height:100%; float:left; transition: all .8s;}
ul.breadcrumb_list li.compte p{color:#05ac0d;}

/* ------------------------- */
.question-Box{
    float:left;
    width:100%;
    margin-top:35px;
}

/*---------------- CONGRATULATION --------------*/
.cong_section{
    padding:70px 0 80px;
    display:flex;
    display:-webkit-flex;
    align-items:center;
    -webkit-align-items:center;
    min-height: calc(100vh - 470px);
}
.cong-hdg{
    text-align:center;
    font-size:46px;
    line-height:50px;
    letter-spacing:0.3px;
    font-weight:bold;
    color:#000;
}
.cong-hdg img{
    width:38px;
    display:inline-block;
    vertical-align:top;
    margin:10px 3px 0 -30px;
}
.cong-sub-hdg{
    font-size:29px;
    line-height:36px;
    font-weight:500;
    margin-top:20px;
}
.cong-txt{
    font-size:18px;
    line-height:24px;
    font-weight:500;
    margin-top:25px;
}

/*---------------- STEP-1 --------------*/
.secure_box{
    display:flex;
    display:-webkit-flex;
    align-items:center;
    -webkit-align-items:center;
    justify-content:center;
    -webkit-justify-content:center;
    max-width:430px;
    width:100%;
    margin:0 auto;
}
.secure_box img{
    width:112px;
    margin-right:20px;
}
.secure_box p{
    font-size:16px;
    line-height:22px;
    text-align:left;
    padding-left:20px;
    position:relative;
    border-left:1px solid #cecece;
}
.option-txt{
    font-size:20px;
    line-height:24px;
    font-weight:500;
    margin-top:35px;
}

.opt-choose{
    width:150px;
    display:flex;
    display:-webkit-flex;
    justify-content:center;
    -webkit-justify-content:center;
    margin:20px auto 0;
}
.opt_box{
    width:48%;
    position:relative;
    cursor:pointer;
}
.opt_box p{
    font-size:18px;
    line-height:20px;
    display:inline-block;
    vertical-align:middle;
}
.rad-btn{
    opacity:0;
    position:absolute;
}
.rad-btn + span{
    width:18px;
    height:18px;
    border-radius:50%;
    border:1px solid #b5b5b6;
    background:#fff;
    position:relative;
    display:inline-block;
    vertical-align:middle;
    margin-right:2px;
}
.rad-btn:checked + span:before{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    margin:-5px 0 0 -5px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#255daa;
}

/*----------------LOADING--------------*/

.load_hdg{
    font-size:30px;
    line-height:34px;
    font-weight:bold;
}
.load_txt{
    font-size:20px;
    line-height:30px;
    margin-top:15px;
}
.loading_img{
    width:110px;
    margin-top:25px;
}
.load_sml-txt{
    font-size:18px;
    line-height:22px;
    color:#6f6f6f;
    margin-top:25px;
}

/*----------------AUTHORIZE--------------*/
.author_txt{
    font-size:16px;
    line-height:24px;
    text-align:left;
}
.e-sign_box{
    -webkit-appearance:none;
    outline:none;
    width:100%;
    height:135px;
    background:#fff;
    border-radius:12px;
    border:2px dashed #848484;
    padding:20px 25px;
    margin-top:25px;
    resize:none;
    font-family: 'DM Sans';
    font-size:18px;
    line-height:22px;
}

.step-inrBox{
    float:left;
    width:100%;
}
.step-hdng{
    float:left;
    width:100%;
    text-align:center;
    font-size:30px;
    line-height:38px;
    letter-spacing:0.3px;
    font-weight:bold;
    color:#000;
}
.option-box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 450px;
    margin: 20px auto 0;
}

div#existing_loan_content {
    width: 100%;
}
.step3-btn{
    width: 100%;
    display: block;
    text-align: center;
}
.plnfrmfield{
    width:100%;
    margin-top:20px;
    padding: 0 20px;
}
.plnfrmfield.hlf{ width:49%;}
.plnfrmfield.dob-field{ width:32%;}
.plnfrmfield label{
    float:left;
    width:100%;
    font-size:20px;
    line-height:28px;
    color:#000000;
    text-align:left;
    font-weight:500;
}
.plninput{
    float:left;
    width:100%;
    height:66px;
    border:1px solid #707070;
    padding:0 15px;
    font-size:19px;
    line-height:20px;
    font-family: 'DM Sans';
    margin-top:0;
    color:#000;
    border-radius:10px;
    outline:none;
    -webkit-appearance: none;
    -webkit-box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.1);
}
.dwn-arw {
    background: url(/images/lp7/drop-arw.png) no-repeat right 12px center #fff;
}

/* Error State */
.errorBorder{
    border-color: #ff0000 !important;
}

/* Date Input with Calendar Icon */
.date-input-wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: 66px;
    overflow: hidden;
}

.date-input-wrapper .plninput {
    padding-right: 50px;
}

.calendar-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #707070;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-icon:hover {
    color: #333;
}

/* Error Message */
.error-message {
    color: #ff0000;
    font-size: 14px;
    text-align: left;
    margin-top: 5px;
    display: none;
    width: 100%;
    float: left;
}
.error-message.show {
    display: block;
}

/* SSN Security Badge */
.input-secure-wrapper {
    position: relative;
    width: 100%;
    float: left;
}

.input-secure-wrapper .plninput {
    padding-right: 90px;
}

.ssn-secure-badge {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
    color: #28a745;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
}

.ssn-secure-badge svg {
    flex-shrink: 0;
}

.pg-btn{
    display:inline-block;
    vertical-align:top;
    max-width:430px;
    width: 100%;
    height:70px;
    line-height:70px;
    margin-top:35px;
    cursor:pointer;
    color:#fff;
    font-size:28px;
    font-weight:bold;
    font-family: 'DM Sans';
    border-radius:50px;
    -webkit-appearance:none;
    /* text-transform:uppercase; */
    position:relative;
    border:none;
    background:#04d36f;
    outline:none;
    transition: all 0.2s ease;
}
.pg-btn:hover{
    background:#03b85f;
    box-shadow:0 4px 12px rgba(4, 211, 111, 0.4);
}
.btn-back{
    display:inline-block;
    vertical-align:top;
    text-align:center;
    font-size:15px;
    line-height:20px;
    text-transform:uppercase;
    color:#7d7d7d;
    cursor:pointer;
    margin-top:30px;
}
.btn-back img{
    display:inline-block;
    vertical-align:middle;
    margin:-4px 8px 0 0;
}
.btn-back:hover{
    color:#0c4c92;
}

.promise_sec{
    float:left;
    width:100%;
    padding:30px 0;
    border-bottom:1px solid #ddd;
}
.promise_head{
    float:left;
    width:100%;
    font-size:20px;
    line-height:26px;
    color:#16355f;
    font-weight:bold;
}
ul.promise_row{
    float:left;
    width:100%;
    margin-top:25px;

    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    justify-content: space-between;
    align-items: center;
}
ul.promise_row li{
    float:left;
    margin:0 0;
}
ul.promise_row li img{
    display:block;
    margin:0 auto;
    max-width:100%;
}

/*-======footer======*/
.footer{
    float:left;
    width:100%;
    padding:50px 0;
}
.footer_logo{
    display:block;
    margin:0 auto 15px;
    width:180px;
}
.footer_text{
    float:left;
    width:100%;
    font-size:16px;
    line-height:22px;
    color:#081936;
    font-weight:normal;
    margin:10px 0 0;
    letter-spacing:0.5px;
}
.footer_text a{ padding:0 10px;}



/*==============Media=============*/


@media only screen and (max-width:1200px){
.container{ width:1004px;}

}

@media only screen and (max-width:1021px){
.container{ width:750px;}
.forDesk{ display:none;}
.forTab{ display:block;}

ul.promise_row li {padding: 0 10px;}
}


@media only screen and (max-width:767px){
    .plnfrmfield{
        width: 100%;
    }
.container{ width:100%; max-width:600px; padding:0 15px;}

.forMob{ display:block;}
.hide-mob{ display:none;}

.header{height:55px;}
.logo{ width:135px; margin-top:12px;}
.header_call{font-size:17px;line-height:20px;margin-top:20px;}
.call_icon{margin:-4px 8px 0 0;width:14px;}

.quiz_section{ padding:20px 0 30px;}
.progressbar{ height:8px;width: 89%;}
.progress-val{font-size: 14px;line-height: 14px;top: -3px;  right: -35px;}

.question-Box{ margin-top:25px;}
.step-hdng{font-size: 26px;line-height: 32px;}
.option-box{ margin-top:10px; max-width:340px; margin-left:auto; margin-right:auto; }
.option-col{ margin-top:12px;}
.desc-opt{padding: 5px 15px;font-size: 16px; line-height: 20px;height: 65px; border-radius: 6px;}
.option-col input[type="radio"] + span{width: 20px; height: 20px;left: 10px;}

.quiz__hdg{font-size:26px; line-height:32px;}

.cong_section{padding:30px 0 40px; min-height:auto;}
.cong-hdg{font-size:30px; line-height:34px;}
.cong-hdg img {width: 25px;margin: 6px 0 0 -27px;}
.cong-sub-hdg{font-size:22px; line-height:25px}
.cong-txt{font-size:17px; line-height:24px; margin-top:20px;}

.breadcrumb{margin-top:20px; max-width:360px;}
.breadcrumb_icon{width:24px; height:24px; flex-shrink:0;}
.breadcrumb_icon.active{padding:3px;}
.breadcrumb_line{flex:1; height:4px;}
ul.breadcrumb_list li span{font-size:14px; line-height:16px; margin:0 0 8px;}
ul.breadcrumb_list li p{font-size:12px; line-height:14px;}


.secure_box img{margin-right:15px;}
.secure_box p{font-size:12px; line-height:16px; padding-left:15px;}

/*.opt-choose{margin:15px 0 0;}*/
.option-txt{font-size:17px; line-height:20px; margin-top:28px;}

.load_hdg{font-size:24px; line-height:28px;}
.load_txt{font-size:18px; line-height:26px; margin-top:10px;}
.loading_img{width:86px;}
.load_sml-txt{font-size:15px; line-height:20px; margin-top:18px;}

.author_txt{font-size:13px; line-height:18px;}
.e-sign_box{font-size:16px; line-height: 20px;}

.plnfrmfield{ margin-top:15px;}
.plninput{ height:65px;font-size: 17px; letter-spacing:0.3px;}
.input-secure-wrapper .plninput{ padding-right:80px;}
.ssn-secure-badge{ font-size:12px; right:12px;}

.pg-btn{height: 64px; line-height: 64px;font-size: 21px; letter-spacing:0.5px;margin-top: 35px; max-width:340px;}
.btn-back{ font-size:12px; margin:25px 0 0;}

.promise_sec{ padding:20px 0;}
.promise_head{ font-size:16px; line-height:24px;}
ul.promise_row{flex-wrap: wrap; margin-top:0; width:calc(100% + 30px); margin-left:-15px;}
ul.promise_row li{ width:33.33%; margin-top:15px;}
ul.promise_row li img{ max-width:90%;}

.footer{ padding:30px 0;}
.footer_logo{ width:150px;}
.footer_text{font-size: 13px;line-height: 17px;}
.footer_text a {padding: 0 3px;}

}