@import 'partials';
.modal{
&.add-property{
.modal-xl{
width: calc(100% - 60px);
max-width: 1440px;
@media ($sm-1199){
width: calc(100% - 40px);
}
@media ($sm-579){
width: calc(100% - 16px);
}
}
.modal-content{
border-radius: 32px;
@media ($sm-1199){
border-radius: 24px;
}
}
.modal-header{
border-top-left-radius: 32px;
border-top-right-radius: 32px;
border-bottom: none;
padding-top: 40px;
@media ($sm-1679){
padding-top: 30px;
}
@media ($sm-1441){
padding-top: 20px;
}
@media ($sm-1199){
border-top-left-radius: 24px;
border-top-right-radius: 24px;
}
}
.modal-footer{
border-bottom-left-radius: 32px;
border-bottom-right-radius: 32px;
border-top: none;
padding-bottom: 40px;
@media ($sm-1679){
padding-bottom: 30px;
}
@media ($sm-1441){
padding-bottom: 20px;
}
@media ($sm-1199){
border-bottom-left-radius: 24px;
border-bottom-right-radius: 24px;
}
.btn{
width: 100%;
max-width: 218px;
@media ($sm-1199){
max-width: 160px;
padding: 10px 15px;
font-size: 12px;
}
@media ($sm-767){
max-width: calc(50% - 10px);
}
@media ($sm-479){
max-width: 100%;
margin-right: 0px;
margin-left: 0px;
}
display: inline-flex;
align-items: center;
padding-left: 30px;
padding-right: 30px;
.ico{
flex: 0 0 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
}
&.btn-cancel{
background-color: #807FA7 !important;
border-color: #807FA7;
}
&.btn-submit{
background-color: #25B0F0 !important;
border-color: #25B0F0;
}
}
}
.modal-header,
.modal-body,
.modal-footer{
padding-left: 60px;
padding-right: 60px;
@media ($sm-1679){
padding-left: 50px;
padding-right: 50px;
}
@media ($sm-1441){
padding-left: 40px;
padding-right: 40px;
}
@media ($sm-1199){
padding-left: 20px;
padding-right: 20px;
}
}
.modal-title{
font-size: 24px;
font-weight: 600;
@media ($sm-1679){
font-size: 20px;
}
@media ($sm-1441){
font-size: 18px;
}
}
.left-col,
.right-col{
display: flex;
flex-direction: column;
@media ($sm-1441){
justify-content: space-between;
}
}
.left-col{
@media ($lg-1680){
padding-right: 50px;
}
@media ($lg-1442){
padding-right: 40px;
}
.form-group{
margin-bottom: 32px;
@media ($sm-1199){
margin-bottom: 30px;
}
&.phone{
.parsley-errors-list{
bottom: -20px;
}
}
.input-group{
select.input-group-text{
option:checked{
background-color: #25B0F0;
color: #fff;
opacity: 1;
}
}
.input-group-text{
border-radius: 27px 0 0 27px;
background-color: transparent;
border-color: #c1c1d1;
color: #807FA7;
font-size: 16px;
min-width: 80px;
padding-right: 10px;
background: url(../img/select-icon.svg) no-repeat right 5px center;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
option:checked{
background-color: #25B0F0;
color: #fff;
opacity: 1;
}
&:focus-visible{
outline: none !important;
box-shadow: none !important;
}
@media ($sm-1679){
font-size: 14px;
}
}
.form-control{
padding-left: 20px;
border-top-right-radius: 27px !important;
border-bottom-right-radius: 27px !important;
}
}
}
}
.right-col{
@media ($lg-1680){
padding-left: 50px;
}
@media ($lg-1442){
padding-left: 40px;
}
.form-group{
margin-bottom: 42px;
@media ($sm-1679){
margin-bottom: 37px;
}
@media ($sm-1441){
margin-bottom: 40px;
}
@media ($sm-1199){
margin-bottom: 30px;
}
}
}
.form-group{
margin-bottom: 30px;
position: relative;
@media ($sm-1679){
margin-bottom: 18px;
}
.form-control-wrp{
position: relative;
&.sqft{
.ico{
width: 63px;
}
}
.ico{
right: 0;
top: 0;
bottom: 0;
width: 48px;
position: absolute;
display: flex;
align-items: center;
justify-content: flex-end;
color: #B2B1D4;
padding-right: 24px;
@media ($sm-1679){
padding-right: 18px;
}
@media ($sm-1199){
padding-right: 12px;
}
&.bold{
font-weight: 700;
}
}
.form-control{
padding-right: 70px;
}
}
.form-control{
border: 1px solid #c1c1d1;
box-shadow: none;
min-height: 56px;
border-radius: 27px;
padding-left: 28px;
padding-right: 28px;
color: #030051;
font-size: 16px;
&::placeholder{
color: #807FA7;
font-weight: 300;
}
@media ($sm-1679){
font-size: 14px;
min-height: 48px;
padding-left: 24px;
padding-right: 24px;
}
@media ($sm-1441){
min-height: 40px;
padding-left: 20px;
padding-right: 20px;
}
}
textarea.form-control{
border-radius: 16px;
padding-top: 16px;
padding-bottom: 16px;
max-height: 64px;
}
}
.label{
font-weight: 500;
margin-bottom: 8px;
font-size: 18px;
@media ($sm-1679){
font-size: 16px;
margin-bottom: 6px;
}
@media ($sm-1441){
font-size: 14px;
margin-bottom: 4px;
}
}
}
}
.custom-file-uploader{
min-height: 89px;
display: flex;
flex-direction: column;
.file-uploader{
padding: 24px;
border: 1px dashed #25b0f0;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
background-color: #25B0F008;
position: relative;
flex: 1;
@media ($sm-1679){
padding: 18px;
}
@media ($sm-1441){
padding: 16px;
}
input{
position: absolute;
inset: 0;
opacity: 0;
}
.title,
.filespec{
display: block;
}
.title{
font-size: 14px;
color: #030051;
font-weight: 600;
@media ($sm-479){
font-size: 12px;
}
}
.filespec{
font-size: 12px;
color: #807FA7;
font-weight: 300;
@media ($sm-479){
font-size: 11px;
}
}
.txt{
padding-left: 16px;
}
}
.uploaded-files{
padding: 15px 60px;
background-color: #f6f6f9;
border-radius: 16px;
margin-top: 14px;
// display: none;
@media ($sm-1679){
padding: 15px 40px;
}
@media ($sm-1441){
padding: 15px 20px;
}
.slick-arrow{
background-image: url(../img/dwn-arrow.png);
background-repeat: no-repeat;
background-size: contain;
background-color: transparent !important;
width: 12px;
height: 18px;
&.slick-next{
transform: translate(0, -50%) rotate(90deg);
@media ($sm-1441){
right: -8px;
}
}
&.slick-prev{
transform: translate(0, -50%) rotate(-90deg);
z-index: 2;
@media ($sm-1441){
left: -4px;
}
}
&:before{
display: none;
}
}
.up-files-slider{
display: flex;
.up-file-itm{
margin-left: 5px;
margin-right: 5px;
position: relative;
border-radius: 16px;
overflow: clip;
&:hover{
.del-ico{
opacity: 1;
}
}
.del-ico{
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #030051A6;
opacity: 0;
// width: 91px;
.btn-delete{
background-color: transparent !important;
border: none !important;
}
}
img{
width: 100%;
height: 100%;
object-fit: cover;
position: center;
}
.slide-img-wrp{
width: 91px;
height: 68px;
}
&.slick-slide{
.slide-img-wrp{
width: 100%;
max-height: 68px;
}
}
}
}
}
}
.inline-checks{
display: flex;
flex-wrap: wrap;
&.res-type{
.custom-check{
// min-width: 30%;
min-width: auto;
}
}
}
.custom-check{
position: relative;
padding-right: 24px;
padding-top: 10px;
padding-bottom: 10px;
@media ($sm-1679){
padding-top: 5px;
padding-bottom: 5px;
font-size: 14px;
padding-right: 20px;
}
@media ($sm-1441){
padding-right: 16px;
}
input{
&[type=radio],&[type=checkbox]{
position: absolute;
inset: 0;
opacity: 0;
&:checked{
& ~ .chk_label{
color: #25b0f0 ;
span{
&.round{
border: 1px solid #25b0f0;
&:after{
background-color: #25b0f0;
}
}
&.square{
border: 1px solid #25b0f0;
background-color: #25b0f0;;
&:after{
background-color: transparent;
}
}
}
}
}
}
}
.chk_label{
display: flex;
align-items: center;
span{
&.round{
width: 20px;
height: 20px;
flex: 0 0 20px;
margin-right: 5px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 20px;
@media ($sm-1679){
width: 16px;
height: 16px;
flex: 0 0 16px;
}
&:after{
content: '';
width: 12px;
height: 12px;
background-color: #c1c1d1;
border-radius: 20px;
@media ($sm-1679){
width: 10px;
height: 10px;
}
}
}
}
}
&.chkbox{
.chk_label{
display: flex;
align-items: center;
span{
&.square{
position: relative;
width: 20px;
height: 20px;
flex: 0 0 20px;
margin-right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #c1c1d1;
border-radius: 5px;
@media ($sm-1679){
width: 16px;
height: 16px;
flex: 0 0 16px;
}
&:after{
content: '';
// width: 12px;
// height: 12px;
// background-color: #c1c1d1;
// border-radius: 5px;
// @media ($sm-1679){
// width: 8px;
// height: 8px;
// }
left: 6px;
top: 3px;
width: 6px;
height: 10px;
@media ($sm-1679){
left: 5px;
top: 1px;
width: 5px;
height: 9px;
}
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
}
}
}
}
}
}
.datepicker table tr td.active.active{
background:#25b0f0 !important;
}
.consent-chk{
.custom-check.chkbox .chk_label{
@media ($sm-579){
align-items: flex-start;
}
span.square{
@media ($sm-579){
margin-top:3px
}
}
}
}