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

@-webkit-viewport {
    width: device-width;
}
@-moz-viewport {
    width: device-width;
}
@-ms-viewport {
    width: device-width;
}
@-o-viewport {
    width: device-width;
}
@viewport {
    width: device-width;
}
input:-webkit-autofill,
select:-webkit-autofill {
    box-shadow: 0 0 0 100px white inset;
    color:#555 !important;
    -webkit-text-fill-color:#555;
}
input:-webkit-autofill:focus,
select:-webkit-autofill:focus,
textarea:-webkit-autofill:focus {
    box-shadow: 0px 0px 4px 1px #2e75b6;
    -webkit-text-fill-color:#2e75b6;
}

header, footer, section {
    display:block;
}
body, div, p, h1, h2, textarea, input, select, li, a {
    font-family:'open sans',Arial,helvetica, sans-serif;
    color:#666;
}
.apply-bullet{padding-top: 25px; list-style: none; padding-left: 0; padding-bottom: 10px}
.apply-bullet li {color: #D37426 !important;font-size: 0.9em;font-weight: 400;line-height: 1.8em;margin-bottom: 10px}
.apply-one {background: rgba(0, 0, 0, 0) url("../images/one-apply.png") no-repeat scroll 0 0;padding-left: 35px}
.apply-two {background: rgba(0, 0, 0, 0) url("../images/two-apply.png") no-repeat scroll 0 0;padding-left: 35px}
.apply-three {background: rgba(0, 0, 0, 0) url("../images/three-apply.png") no-repeat scroll 0 0;padding-left: 35px}
.apply-four {background: rgba(0, 0, 0, 0) url("../images/four-apply.png") no-repeat scroll 0 0;padding-left: 35px}
.apply-five {background: rgba(0, 0, 0, 0) url("../images/five-apply.png") no-repeat scroll 0 0;padding-left: 35px}
.apply-six {background: rgba(0, 0, 0, 0) url("../images/six-apply.png") no-repeat scroll 0 0;padding-left: 35px}
.bullets-wrap {float: left;width: 70%}
.ssl-seal-logo {float: left;padding-top: 35px;text-align: right;width: 30%}
.ht100{height: 100px}

body {
    padding:20px;
    background-color:#fff;
    margin:0px auto;
}
#holder {
    max-width:900px;
    background-color:#eff3f3;;
    margin:0px auto 0px auto;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
div#pnlForm1,
div#pnlForm2 {
    padding-top:13px;
    max-width:667px;
    margin:auto;
    height: auto;
    padding-bottom:85px;
}
h2 {
    margin-bottom:60px;
    color:#fab578;
}
section {
    margin-right:auto;
    margin-left:auto;
    clear:both;
}

section div {
    float:left;
    width:47%;
    padding-left:10px;
    padding-right: 10px;
}
section div:first-of-type {
    float:none;
    font-size: 20px;
    font-weight: bold;
    background-color: #34495e;
    color: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 9px 16px 9px 16px;
    margin-bottom: 25px;
    width:630px;
    clear:both;
}
#pnlForm1 section table thead tr th {background-color: #34495e;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;clear: both;color: #fff;float: none;font-size: 20px;font-weight: bold;margin-bottom: 25px;padding: 9px 16px;width: 630px; text-align: left}
#pnlForm1 section table thead tr th span {font-size: 13px;font-weight: normal;padding-left: 10px}
section div:first-of-type span {
    font-size: 13px;
    font-weight: normal;
    padding-left: 10px;
}
section div.break {
    float:none;
}
section div.fullbreak {
    float:none;
    width:100%;
    clear:both;
}
label {
    font-weight:bold;
    color:#666;
    padding-bottom:5px;
    padding-left:3px;
    float:left;
    display:inline-block;
    width:300px;
}
label span {
    display: block;
    font-size: 10px;
    padding-top: 5px;
    font-weight: normal;
}
section label.addspan {
    padding-top:19px;
}

input[type=text],
input[type=number],
input[type=email],
input[type=tel],
input.date,
select {
    border: 1px solid #ccc !important;
    -webkit-appearance:none;
    -moz-appearance:none;
    width:90%;
    font-size:17.2px;
    color:#555;
    background-color:#fff;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    padding:8px;
    margin:2px;
    margin-bottom:5px;
    height:22px;
}
select:not(.noselect) option:first-of-type {
    color:#aaa;
}
select:invalid {
    color:#aaa;
}
select:invalid option:not(:first-of-type) {
    color:#fab758;
}
select.unselected {
    color:#aaa;
}
select.unselected:focus,
select.valid:focus,
select.invalid:focus,
select:focus {
    color:#555;
}
select.invalid {
    background-image:url(../Images/dropdowninvalid.png);
}
/* IE hacks */
input[type=text]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder  {
    color:#aaa !important; 
}
select::-ms-expand{
  display:none;
}
select {
    width:96%;
    min-height:40px;
    height:40px;
    background: url(../Images/dropdown.png) no-repeat center right #fff;
}
select.W50PC,
input[type=text].W50PC,
input[type=number].W50PC,
input[type=tel].W50PC {
    width:47%;
}
select.W33PC,
input[type=text].W33PC,
input[type=number].W33PC,
input[type=tel].W33PC {

    width:30%;
}
select.W25PC,
input[type=text].W25PC,
input[type=number].W25PC,
input[type=tel].W25PC {

    width:24%;
}
select.W66PC,
input[type=text].W66PC,
input[type=number].W66PC,
input[type=tel].W66PC {

    width:60%;
}
.hidden {
    visibility:hidden;
}
.displaynone {
    display:none;
}
select option:first-of-type {
    color:#aaa;
}

h2 {
    font-size:18px;
    font-weight:bold;
    padding:20px 15px 0px 30px;
    color:#fab578;
    margin-bottom:40px;
}
input[type=submit] {
    text-transform:uppercase;
    text-align:center;
    height:40px;
    width:250px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background-color: #fee801;
    border-color: #fee801;
    color: #00529c;
    line-height:40px;
    text-decoration:none;
    font-size:19px;
    cursor:pointer;
    border:none;
    outline:0;
    outline-style:none;
    margin-left:28px;
}
input[type=submit]:hover,
input[type=submit]:focus {
    background-color: #fecb01;
    border-color: #fecb01;
    color: #00529c;
}
input[type=text].valid, 
input[type=email].valid, 
input[type=tel].valid, 
input.date.valid, 
select.valid {
    border: 1px solid #34495e !important;
}
input[type=text].invalid, 
input[type=email].invalid, 
input[type=tel].invalid, 
input.date.invalid, 
select.invalid {
    border: 1px solid #fab758 !important;
    box-shadow: 0px 0px 4px 1px #fab758;
}
input:focus,
select:focus {
    outline: none;
    outline-style: none;
    border: 1px solid #2e75b6 !important;
    box-shadow: 0px 0px 4px 1px #2e75b6;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
input#btnSubmit {
    width: 273px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
footer {
    padding-left:40px;
    padding-right:40px;
    font-size:14px;
}
footer a {
    color:#00bff3;
    text-decoration:none;
}
footer a:hover,
footer a:active {
    text-decoration:underline;
}
#pnlProgress footer {
    text-align:center;
    padding-bottom: 175px;
}
#pnlProgress footer:last-of-type {
    padding-bottom: 27px;
}
#pnlProgress section {
    padding-top:40px;
    text-align:center;
}
#pnlProgress section div {
    margin: auto;
}
#btnApply {
    float:right;
}
#btnBack {
    width:150px;
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}
#btnBack:hover {
    background-color:#31b0d5;
    border-color:#269abc;
}
#chkMarket {
    position:relative;
    top:14px;
    margin-left:-33px;
    width:25px;
    height:25px;
}
p {
    margin-top: 0px;
    margin-bottom: 10px;
}
@-moz-keyframes rotate {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.spinner {
    -webkit-animation: rotate 2s linear infinite;
    -moz-animation: rotate 2s linear infinite;
    -ms-animation: rotate 2s linear infinite;
    -o-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;    
}
.text1, 
.text2 {
    padding-top:50px;
    padding-bottom:50px;
}
/* postcode anywhere overrides */
.pca .pcatext {
    font-size: 14px;
    color: #555;
}
.pca .pcalist {
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
/* ui-datepicker calendar overrides */
.ui-helper-clearfix:before, .ui-helper-clearfix:after {
    content: "";
    display: table;
    border-collapse: collapse;
}
.ui-helper-clearfix:after {
    clear: both;
}
.ui-helper-clearfix {
    min-height: 0;
}
.ui-state-disabled {
    cursor: default !important;
}
.ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}
.ui-datepicker {
    width: 17em;
    padding: 10px;
    padding-bottom: 5px;
    display: none;
    border: 1px solid #ddd;
    background-color: #fff;
    font-size: 15px;
}
.ui-datepicker thead {
    background-color: #eeeeff;
    border: 1px solid #ccc;
}
.ui-datepicker .ui-datepicker-header {
    position: relative;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 2px;
    width: 23px;
    height: 23px;
}
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
    top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
    left: 2px;
}
.ui-datepicker .ui-datepicker-next {
    right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
    left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
    right: 1px;
}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    display: block;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
}
.ui-datepicker-title:before {
    content:'';
}
.ui-datepicker .ui-datepicker-title select {
width: 29%;
    border-radius: 0px;
    padding: 3px;
    font-size: 1em;
    margin: 1px 0;
}
select.ui-datepicker-month {
    float: right;
    margin-right: 26px !important;
}
.ui-datepicker select option {
    color: #555;
}
.ui-datepicker table {
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
    margin: 0 0 .4em;
    border: 1px solid #ddd;
}
.ui-datepicker th {
    padding: 3px;
    text-align: center;
    border: 0;
}
.ui-datepicker td {
    border: 0;
    padding: 0px;
}
.ui-datepicker td span, .ui-datepicker td a {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none;
}
.ui-state-disabled .ui-state-default {
    background-color: #eee !important;
}
.ui-widget-content {
    color: #333;
}
.ui-widget-content a {
    color: #333;
}
.ui-widget-header a {
    color: #fff;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    font-weight: 300;
    background-color: #fff;
}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
    color: #1c94c4;
    text-decoration: none;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    background-color: #ccc;
}
.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited {
    color: #c77405;
    text-decoration: none;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: 1px solid #555;
    background: #888;
    color: #fff;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: #eb8f00;
    text-decoration: none;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #fed22f;
    background: #ffe45c;
    color: #363636;
}
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a {
    color: #363636;
}
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {
    border: 1px solid #cd0a0a;
    background: #b81900;
    color: #fff;
}
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a {
    color: #fff;
}
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text {
    color: #fff;
}
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary {
    font-weight: bold;
}
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {
    opacity: .7;
    filter: Alpha(Opacity=70);
    font-weight: normal;
}
.ui-icon {
    width: 16px;
    height: 16px;
    color: transparent;
}
.ui-icon-circle-triangle-e {
    position: relative;
    height: 0px !important;
    border-top: 8px solid transparent;
    border-left: 9px solid #555;
    border-bottom: 7px solid transparent;
}
.ui-icon-circle-triangle-w {
    position: relative;
    height: 0px !important;
    border-top: 8px solid transparent;
    border-right: 9px solid #555;
    border-bottom: 7px solid transparent;
    left: 15% !important;
}




section div:first-of-type input[type="checkbox"] {
    display:none;
}

section div:first-of-type input[type="checkbox"] + label {
    color:#f2f2f2;
    width: auto;
}

section div:first-of-type input[type="checkbox"] + label span {
    display:inline-block;
    width:8px;
    height:13px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(https://supasmartloans.co.za/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

section div:first-of-type input[type="checkbox"]:checked + label span {
    background:url(https://supasmartloans.co.za/check_radio_sheet.png) -19px top no-repeat;
}

section div:first-of-type input[type="radio"] {
    display:none;
}

section div:first-of-type input[type="radio"] + label {
    color:#f2f2f2;
    font-family:Arial, sans-serif;
    width: auto;
    float: none;
}

section div:first-of-type input[type="radio"] + label span {
    display:inline-block;
    width:8px;
    height:15px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(https://supasmartloans.co.za/check_radio_sheet.png) -38px top no-repeat;
    cursor:pointer;
}

section div:first-of-type input[type="radio"]:checked + label span {
    background:url(https://supasmartloans.co.za/check_radio_sheet.png) -57px top no-repeat;
}


/* ******************************************************** */
@media screen and (max-width: 768px){
    .bullets-wrap {
        float: none;
        padding-left: 30px;
        width: 80%;
    }
    .ssl-seal-logo {
        float: none;
        margin-bottom: 19px;
        padding-top: 0;
        text-align: center;
        width: 100%;
    }
}
@media screen and (max-width:750px) {
    div.row > label {
        font-size:16px\9; /* hack for IE */
    }
    _:-moz-tree-row(hover), 
    div.row > label {
        font-size:17px; /* hack for FF */
    }
    _:-moz-tree-row(hover), 
    h2 {
        padding-top:35px; /* hack for FF */
    }
    
    body::-webkit-scrollbar {
        width: 5px;
    }
    body::-webkit-scrollbar-thumb {
        background-color: initial;
        border: 1px solid #b8b8b8;
        -webkit-box-shadow: 0 0 10px 10px #bcbcbc inset;
    }
    section {
        margin-right:4%;
        margin-left:4%;
    }
    section div {
        width: 98%;
        max-width: 98%;
    }
    section div:first-of-type {
        width:95%;
        max-width:95%;
    }
    label {
        width:99%;
    }
    section label.addspan {
        padding-top:0px;
    }
    input[type=text], 
    input[type=email], 
    input[type=tel], 
    input.date {
        width: 95%;
    }
    select {
        width:98%;
    }
    select.W50PC, 
    input[type=text].W50PC, 
    input[type=tel].W50PC {
        width: 48%;
    }
    select.W33PC, 
    input[type=text].W33PC, 
    input[type=number].W33PC, 
    input[type=tel].W33PC {
        width: 30%;
    }
    input#btnSubmit {
        position:relative;
        margin-left:-10px;
    }
}

@media screen and (max-width:600px) {
    section div:first-of-type {
        width: 94%;
    }
    section div {
        width: 96%;
    }
    /* postcode anywhere overrides */
    .pca .pcatext {
        font-size: 12px;
    }
}
@media screen and (max-width:574px) {
    #pnlForm2 footer div div {
        text-align:center;
    }
    #btnBack {
        margin-left:0px;
    }
    #btnApply {
        float:none;
        margin:auto;
    }
    #btnApply {
        margin-top:10px;
    }
}
@media screen and (max-width:500px) {
    body {
        padding: 10px;
    }
    section div:first-of-type {
        width: 93%;
    }
    section div {
        width: 95%;
    }
}
@media screen and (max-width:450px) {
    section div:first-of-type {
        width: 92%;
    }
    section div {
        width: 94%;
    }
    /* postcode anywhere overrides */
    .pca .pcatext {
        font-size: 10px;
    }
}
@media screen and (max-width:400px) {
    section div:first-of-type {
        width: 90%;
    }
    select.W50PC, input[type=text].W50PC, input[type=tel].W50PC {
        width: 47%;
    }
    select.W25PC, input[type=text].W25PC, input[type=number].W25PC, input[type=tel].W25PC {
        width: 21%;
    }
    input[type=submit] {
        max-width:98%;
        margin-right:auto;
        margin-left:auto;
    }
}
@media screen and (max-width:362px) {
   section div:first-of-type {
        width: 88%;
    }
   .shrinkable {
       font-size:smaller;
   }
}