@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

:root {
  --hero-colour: #3521B6;
 }

html{
	scroll-behavior: smooth;
}
body{
   font-family: 'Lato', sans-serif !important;
}

button{
	overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

#demo-frame, #broker_signup_d, #referrer-demo-frame{
	    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.btn-link, .btn-link:hover{
	color: #212529 !important;
	text-decoration: none !important;
}

.demo-iframe{
	background-color: #fff;
	max-height: 330px;
	height: 100%;
	width: 100%;
}

.demo-frame-header *, .referrer-demo-frame-header *, .demo-frame-body *{
	pointer-events: none;
	  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.font-select{
	height: calc(3rem + 2px) !important;
}

.demo-colour-picker{
	height: 20%;
}

.full-demo-frame{
	height: calc(20vw + 5px);
	width: 30vw;
}

.referrer-demo-frame{
	height: 330px;
	width: 800px;
}

.additional-items-outer{
	max-height: 160px;
	overflow-y: scroll;
}
.additional-item-checkbox{
	pointer-events: none;
}

.demo-frame-outer{
	border-top-right-radius: 7px;
	border-bottom-right-radius: 7px;
}

.add-feature-text{
	font-size: 1rem;
}

.add-feature-body{
	font-size: 0.7rem;
}

.demo-frame-btn, .referrer-demo-frame-btn{
	font-size: 0.7rem !important;
}

.demo-frame-comp-text{
	font-size: 0.5rem;
}

.demo-bi-line{
	font-size: 0.7rem;
}

.header{
	background-color: var(--hero-colour);
	color: #fff;
	top: 0;
	left: 0;
	min-height: 8vh;
}



.header-btn{
	border: 1px solid #fff !important;
}

.experience-header{
	top: 0;
	left: 0;
	min-height: 8vh;
}

.experience-footer{
	bottom: 0;
	left: 0;
	min-height: 8vh;
}

.main-footer{
	bottom: 0;
	left: 0;
	min-height: 8vh;
	background-color: var(--hero-colour);
	color: #fff;

}

.experience-footer-logo{
	height: 20px;
	width: 20px;
}

.experience-cover{
	height: 92vh;

}

.demo-experience-cover{
	min-height: 92vh;
}

.experience-inner{
	max-width: 1140px;
	max-height: 720px;
}

.experience-main-container{
	min-height: 92vh;
	background-color: #D5D9E5;
}

.experience-container{
	border-radius: 7px;
	min-height: 550px;
	width: 70vw;
	background-color: #fff;
}

.small-container{
	border-radius: 7px;
	background-color: #fff;
}

.selected_property_type, .selected_household_type, .selected_expenses_type{
	outline: 2px solid green;
}

.main-container{
	min-height: 92vh;
	background-color: #D5D9E5;

}

.main-inner{
		max-width: 1140px;
		max-height: 720px;
}

.header-inner{
	max-width: 1140px;
}


.home-inner{
	max-width: 1140px;
}

.demo-inner{
	max-width: 1300px;
}


.hero-header{
	max-height: 60px;
}

.main{
	height: 100vh;
}

.signup-type{
	background-color: #F6F7F9;
	border-radius: 7px;
}

.property-type, .expenses-type, .household-type{
	background-color: #F6F7F9;
	border-radius: 7px;
}

.expenses-type{
	max-width: 22vw;
}


.hand{
	cursor: pointer;
}

.secondary-text{
	color: #7E838F;
	font-size: 0.9rem;
}

.demo-frame{
	height: 80%;
	width: 80%;
}

.demo-outer{
	border-radius: 7px;
	background-color: #fff;
	box-shadow: 16px 19px 15px -3px rgba(0,0,0,0.1);
}

.demo-bg{
	background-color: #7E838F;
	border-top-right-radius: 7px;
	border-bottom-right-radius: 7px;
}

.demo-header{
	background-color: var(--hero-colour);
	border-top-right-radius: 7px;
	border-top-left-radius: 7px;
	color: #fff;
}

.demo-frame-header, .referrer-demo-frame-header{
	height: 10%;
}
.demo-frame-body{
	height: 90%;
}

.demo-frame-header-logo{
	height: 15px;
}

.demo-frame-button{
	font-size: 0.8rem !important;
}

.demo-icon{
	max-height: 20px;
}

.demo-headshot{
	border-radius: 50%;
	background-color: #eee;
	height: 80px;
	width: 80px;
	background-size: cover;
}

.broker-headshot{
	border-radius: 50%;
	background-color: #eee;
	height: 100px;
	width: 100px;
	background-size: cover;
}

.login-container{
	border-radius: 7px;
	/*min-height: 73vh;
	max-height: 760px;*/
	min-height: 620px;
	width: 70vw;
	background-color: #fff;
}

.demo-text{
	 overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
}


.highlight-bg{
	background-color: #3521B6;
	border-top-right-radius: 7px;
	border-bottom-right-radius: 7px;
}

.selected_custom_bg{
	outline: 5px solid green;
}

.unsplash-results{
	height: 220px;
	overflow-y: scroll;
}

.btn-primary{
	background-color: var(--hero-colour) !important;
	border-color:  var(--hero-colour) !important; ;
}

.icon-body{
	height: 25px;
}

.btn-text{
	font-size: 0.9rem !important;
}

.features-outer{
	border-radius: 7px;
	border: 1px #eee solid;
}

.features-outer-two{
	border-radius: 7px;
	border: 1px #eee solid;
	background-color: #F0F2FF;
}


.has-float-label {
	display: block;
	position: relative
}

.has-float-label label,
.has-float-label>span {
	position: absolute;
	cursor: text;
	font-size: 75%;
	opacity: 1;
	-webkit-transition: all .2s;
	transition: all .2s;
	top: -.5em;
	left: .75rem;
	z-index: 3;
	line-height: 1;
	padding: 0 10px
}

.has-float-label label::after,
.has-float-label>span::after {
	content: " ";
	display: block;
	position: absolute;
	background: #fff;
	height: 2px;
	top: 50%;
	left: -.2em;
	right: -.2em;
	z-index: -1
}

.float-select{
  -webkit-appearance:none;
  padding: 1rem 14px !important;
  height: fit-content !important;
  font-size: 1rem;
      appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1.5rem center;
    background-size: 1em;
}



.has-float-label .form-control::-webkit-input-placeholder {
	opacity: 1;
	-webkit-transition: all .2s;
	transition: all .2s;
	font-size: 0.8rem;
	margin-left: 10px;
}

.has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder {
	opacity: 0
}

.has-float-label .form-control:placeholder-shown:not(:focus)+* {
	opacity: .5;
	top: 1.1rem;
	font-size: 1rem;
}

.input-group .has-float-label {
	display: table-cell
}

.input-group .has-float-label .form-control {
	border-radius: .25rem
}

.input-group .has-float-label:not(:last-child),
.input-group .has-float-label:not(:last-child) .form-control {
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
	border-right: 0
}

.input-group .has-float-label:not(:first-child),
.input-group .has-float-label:not(:first-child) .form-control {
	border-bottom-left-radius: 0;
	border-top-left-radius: 0
}

input:focus {
	border-color: none !important;
  outline: 0 !important;
  box-shadow: none !important;
  
}

input{
	font-size: 1rem !important;
	padding: 0.8rem 0.75rem !important;
}


.form-control:focus {
    color: #495057;
    background-color: #fff;
    
}

.a-no-style, .a-no-style:hover{
	color: inherit !important;
}


.ui-helper-hidden-accessible{
  display:  none !important;
}

.ui-menu {
  width: 250px;
  padding: 0;
  height:10px;
  max-height: 500px;
  border-radius: 5px;

}

.ui-menu li{
    list-style:none;
    background-image:none;
    background-repeat:none;
    background-position:0; 
}

.ui-menu .ui-menu-item{
  cursor: pointer;
  background-color: #fff;
  padding: 5px 10px;
}

.ui-menu-item:hover{
  cursor: pointer;
  background-color: #C4DBF6;
}

 .ui-autocomplete {
 	margin-top: -20px;
     min-height: 150px;
     overflow-y: auto;
     background-color: #fff;
     z-index: 10000;
     /* prevent horizontal scrollbar */
     overflow-x: hidden;
 }

.ui-autocomplete-category{
    background-color: #fff;
  padding: 5px 10px;

}

.show-transition {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#Loan_Score{
	font-size: 2rem !important;
}

.results-card{
	border: none !important;
	box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
}

.broker-image{
	height: 60px;
	width: 60px;
	border-radius: 50%;
}

.experience-image{
	width: 35vw;
}

@media only screen and (max-width: 768px) {


.experience-image{
	width: 75vw;
}



	.experience-main-container{
	min-height: auto;

}

.main-bg{
	background-color: #D5D9E5;
	background: url('../img/hero-bg-sm.webp') !important;
	background-size: cover !important;
   background-repeat:no-repeat !important;
   background-position: center center !important;
}
  

  .header-width{
  	width: 100% !important;
  }


.experience-container{
width: 95vw !important;
height: 500px;
}

.experience-container-grow{
	height: auto !important;
}
/*
  .experience-container{
	border-radius: 7px !important;
	min-height: 80vh !important;
	max-height: none;
	
	background-color: #fff;
	height: auto !important;
}*/


.main-inner{
	max-height: none !important;
}

.contact-frame{
	width: 80vw !important;
}

}


.header-width{
	width: 50%;
}

.loading{
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: rgba(226, 226, 226,0.8);
	top: 0;
	left: 0;
	z-index: 300;
	color: var(--hero-colour);
}

.grecaptcha-badge { 
  visibility: hidden;
}

.terms-text{
	font-size: 0.7rem;
}

.main-options{
	margin: auto;
	background-color: rgba(226, 226, 226,0.9);
	height: 50%;
	width: 100%;
	border-radius: 7px;
}

.opening-cover{
	min-height: 92vh;
}

.features-two{
	min-height: 92vh;
	background-color: #fff;
	max-width: 1140px;
}

.features-three{
	max-width: 1300px;
	min-height: 50vh;
}

.features-four{
	max-width: 1300px;
}

.calculator-bg{
	background-color: #D5D9E5;
}

.opening-main{
	background-color: #D5D9E5;
	
}

.main-bg{
	background-color: #D5D9E5;
	background: url('../img/hero-bg.webp');
	background-size: cover;
   background-repeat:no-repeat;
   background-position: center center;
}

.opening-outer{
	max-width: 1200px;
}

.link-no-style, .link-no-style:hover{
	text-decoration: none !important;
	color: inherit;
}

.bc-icon{
	height: 40px;
}
.household-div{
	width: 22% !important;
}
.bc-icon-text{
	font-size: 0.7rem;
}

.confidence-rating{
	height: 35px !important;
}

.tooltip-inner {
        max-width: 400px !important;
}

.hero-demo{
    height: 550px; 
    width: 300px; 
    position: absolute; 
    left: 15%; 
    top: 10%;
    background-size: 100% 100%; 
    overflow: none;
}

#frame {
        -ms-zoom: 0.6;
        -moz-transform: scale(0.6);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.6);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.6);
        -webkit-transform-origin: 0 0;
    }


 .opening-header-light{
	background-color: #fff ;
	color: var(--hero-colour);
	top: 0;
	left: 0;
	min-height: 65px;
	position: -webkit-sticky;
	position: sticky;
	z-index: 5555;
	border-bottom: 1px solid #e2e2e2;
	width:100vw; 
	overflow:hidden

 }

 .opening-header-dark{
	background-color: var(--hero-colour);
	color: #fff;
	top: 0;
	left: 0;
	min-height: 65px;
	position: -webkit-sticky;
	position: sticky;
	z-index: 5555;
	width:100vw; 
	overflow:hidden
}

.menu-bar{
	top: 8vh;
	left: 0;
	position: -webkit-sticky;
	position: sticky;
	padding: 20px 5px;
	background-color: #fff;
	z-index: 5555;


}


.opening-header-dark a, .opening-header-dark a:hover{
	color: #fff;
	text-decoration: none;
}

.opening-header-light .btn{
	background-color: var(--hero-colour);
	border-color: var(--hero-colour);
	color: #fff;
}

.opening-header-light a, .opening-header-light a:hover{
	color: var(--hero-colour);
	text-decoration: none;
}

.product-image-a{
	height: 350px;

}

.product-icon{
	color: var(--hero-colour);
}

.demo-footer{
	background-color: transparent !important;
	border: none !important;
}

.footer-logo{
	height: 60px;
}

.product-step-1{

background: url('../img/product-step-1.png');
background-size: cover;
background-repeat:no-repeat;
background-position: center center;
height: 150px;

}

.product-step-2{

	background: url('../img/product-step-2.png');
background-size: cover;
background-repeat:no-repeat;
background-position: center center;
height: 150px;
}
.product-step-3{
	background: url('../img/product-step-3.png');
background-size: cover;
background-repeat:no-repeat;
background-position: center center;
height: 150px;
}


.search-box{
	background-color: #fff;
    border-radius: 10px;
    border: 1px solid #000;
    width: 100%;
    padding: 1rem;
}

.sign-in-bg{

    background: linear-gradient(0deg, rgba(226, 226, 226, 0.6), rgba(226, 226, 226, 0.6)), url('https://loantools.com.au/assets/img/sign-in-bg.webp'); 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sign-in-info{
	background-color: #eee;
    border-radius: 5px;
}

img {
	image-rendering: -webkit-optimize-contrast;
}

.bs-stepper-label{
	color: #212529	;
}

.bs-stepper-header{
	height: 15%;
}

.bs-stepper-content{
	height: 85%;
}

.content-title{
	height: 10%;
}

.content-body{
	height: 75%;
}

.content-buttons{
	height: 15%;
}

.question-label{
	font-size: 0.8rem;
}

.bs-stepper-label{
	padding: 10px !important;
}

.bs-stepper .step-trigger:hover{
	background-color: inherit !important;
}

.experience-demo-container{
	height: 550px;
}


.landing-option{
	border: 1px solid #e2e2e2;
	border-radius: 7px;
	box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
}

.shadow{
	box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
}

.options-container{
	max-width: 750px;
}

.options-icon{
	height: 50px;
}

.guide-demo-iframe{
	height: 100%;
	width: 100%;
	overflow: hidden;
	pointer-events: none;
	border: 1px solid #e2e2e2;
}

.script-text{
	background-color: #e2e2e2;
}

.contact-frame{
	width: 450px;
}

.demo-hero{
	-webkit-filter: drop-shadow(15px 15px 15px #e2e2e2);
  filter: drop-shadow(15px 15px 15px #e2e2e2);
}

.example-shadow{
	-webkit-filter: drop-shadow(5px 5px 5px #e2e2e2);
  filter: drop-shadow(5px 5px 5px #e2e2e2);
}

.nav-link.active{
	border-bottom: 3px solid #3521B6;
}

.nav-link{
	color: #212529 !important;
}

.keyboard-div{
height: 400px;
background: url('../img/keyboard-image.png');
background-position: center;
                    background-repeat: no-repeat;
 
}

.loading {
background-color: #FFF;
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999999;
}

.loading-logo{
	height: 50px;
	width: 50px;
}

.rotate {
  animation: rotation 4s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

img{transform: translateZ(0);}
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
  img {
    image-rendering: -webkit-optimize-contrast !important;
  }
}

/* Unset for Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
  img {
    image-rendering: unset !important;
  }
}}


.has-float-label .form-control::-webkit-input-placeholder {
  opacity: 1;
  -webkit-transition: all .2s;
  transition: all .2s;
  font-size: 0.8rem;
  margin-left: 10px;
}

.has-float-label .form-control::-moz-placeholder
 {
  opacity: 1;
  -webkit-transition: all .2s;
  transition: all .2s;
  font-size: 0.8rem;
  margin-left: 10px;
}

.has-float-label .form-control:-ms-input-placeholder
 {
  opacity: 1;
  -webkit-transition: all .2s;
  transition: all .2s;
  font-size: 0.8rem;
  margin-left: 10px;
}

.has-float-label .form-control:-moz-placeholder  
 {
  opacity: 1;
  -webkit-transition: all .2s;
  transition: all .2s;
  font-size: 0.8rem;
  margin-left: 10px;
}




.form-control::-webkit-input-placeholder { color: #b5b5b5; } 
.form-control:-moz-placeholder { color:  #b5b5b5; } 
.form-control::-moz-placeholder { color:  #b5b5b5; }
.form-control:-ms-input-placeholder { color:  #b5b5b5; } 
.form-control::-ms-input-placeholder { color:  #b5b5b5; } 

.has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder {
  opacity: 0
}

.has-float-label .form-control:placeholder-shown:not(:focus)::-moz-placeholder
{
  opacity: 0
}

.has-float-label .form-control:placeholder-shown:not(:focus):-ms-input-placeholder
{
  opacity: 0
}

.has-float-label .form-control:placeholder-shown:not(:focus):-moz-placeholder  
{
  opacity: 0
}

.has-float-label .form-control:placeholder-shown:not(:focus)+* {
  opacity: .5;
  top: 1.2rem;
  font-size: 1rem;
  color: #6c757d !important;
}

.unsplash-img{
	height:133px;
}