@font-face { font-family: 'BwGradual'; src: url(../fonts/BwGradual-Light.woff2) format('woff2'); font-weight: 300; font-display: swap;}
@font-face { font-family: 'BwGradual'; src: url(../fonts/BwGradual-Medium.woff2) format('woff2'); font-weight: 500; font-display: swap;}
html {

    -webkit-tap-highlight-color: rgba(0,0,0,0);
  
  }
:root{ 
    --textcolor:#222222; 
    --lighttext:#585858; 
    --background:#fff; 
    --white:#fff; 
    --primary-color:#F08700; 
    --primary-color-hover:#ff9900; 
    --bordercolor:#EEEEEE;}
img { display: block;}
*{ box-sizing: border-box;}




body { font: 300 14px/1.6 "BwGradual", sans-serif; color: var(--textcolor); background-color: var(--background); padding: 0; margin: 0;}
input, button { font: 300 14px / 1.6 "BwGradual", sans-serif;}





.auth-form { display: flex; flex-direction: column; min-height: 100vh;}
.auth-wrapper {flex: 1;display: flex;flex-direction: column;align-items: center;padding: 80px 30px 20px; max-width: 480px;
    margin: auto;
    width: 100%;
}
.auth-header { padding-bottom: 60px; align-self: center;}
.auth-footer { margin-top: auto;}

.auth-body { align-self: stretch;}
.form-group {padding-bottom: 25px;}
.form-group label { font-size: 14px; padding-bottom: 5px; color: var(--lighttext);}
.form-group input[type="text"]{ border: 0; border-bottom: solid 2px var(--bordercolor); padding: 11px 0px; width: 100%;}
.form-group input[type="text"]:focus-visible { border-bottom-color: var(--primary-color); outline: none;}


.error { color: #ff0000; font-size: 14px; padding-top: 5px;}




.btn { padding: 0px 15px; border: none; font-weight: 500; text-decoration: none; color: inherit; text-align: center;  display: inline-block; line-height: 40px;}
.btn-block { width: 100%;}
.btn.btn-primary { background: var(--primary-color); color: var(--white);}
.btn.btn-primary:hover { background: var(--primary-color-hover);}

.btn-outline-primary { border: solid 2px var(--primary-color); color:var(--primary-color); line-height: 36px}
.btn-outline-primary:hover { background:var(--primary-color); color:var(--white);}










.page{ display: flex; flex-direction: column; min-height: 100vh; width: 100%;}
.page-sidebar{position: relative; z-index: 100;}
.page-main { display: flex; flex-direction: column; min-height: 100vh; align-content: stretch; position: relative; z-index: 1; max-width:100%}



@media (min-width: 728px) {
    .page{ display: flex; flex-direction: row; min-height: 100vh; flex: 1 0 auto}
    .page-sidebar{width:300px}
    .page-main { flex: 1 0 auto; max-width:calc(100% - 300px)}
    
}



.mobile-menu, .mobile-menu.active {-webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease;}
.mobile-menu { position: fixed; top: 0; right: 100%; height: 100vh; box-shadow: 0 0 120px rgba(0,0,0,0.1); width: 300px; background: #fff; z-index: 120;}
.mobile-menu.active { right: calc(100% - 300px);}

.mobile-trigger-button {   left: 20px;    position: absolute;}
.mobile-menu-header { position: relative;}
.close-button { position: absolute; top: 10px; right: 20px;}
.close-button span { width: 2px; height: 20px; display: block;  transform: rotate(45deg); top: 0; right: 0; position: absolute;background: var(--primary-color);}
.close-button span:first-child {transform: rotate(-45deg);z-index: 1;}

.mobile-menu-header {border-bottom: solid 1px var(--bordercolor);padding: 25px 15px 15px;}
.profile-box { display: flex; align-items: center; gap: 10px;}
.profile-image { display: block; width: 50px; height: 50px; overflow: hidden; border-radius:50px}
.profile-data {flex: 1;}
.profile-label { font-size: 14px; line-height: 1.2;}
.profile-name { font-size: 16px; font-weight: 500; line-height: 1.2;}
.profile-image img, .profile-image svg { max-width: 100%; overflow: hidden; object-fit:cover}
.mobile-menu-body ul { padding: 0; margin: 0; list-style: none;}
.mobile-menu-body { padding: 10px 0;}
.mobile-menu-body ul li a { display: block; padding: 15px 20px; color: inherit; text-decoration: none; font-size: 16px; font-weight: 500;}


@media (min-width: 728px) {
    .mobile-menu { position: fixed; top: 0; right: auto; height: 100vh; box-shadow: none; width: 300px; background: #fff; z-index: 120; border-right: solid 1px var(--bordercolor);
    }
    .mobile-trigger-button, .close-button{display: none;}
}







.page-body { flex: 1; padding: 20px;}
.page-footer { display: flex; padding: 15px 20px; justify-content: center;}


.page-header { display: flex; justify-content: center; padding:  20px; background-color: var(--white); position: sticky; top: 0; z-index: 101; box-shadow: 0 3px 30px rgba(0, 0, 0, 0.05);}
.header-sidebox { flex: 1 1 100px;}
.header-logo > * { max-width: 100%; max-height: 100%;}
.header-logo { height: 90px;}

.header-logo { -webkit-transition: all 500ms ease;  -moz-transition: all 500ms ease;   -ms-transition: all 500ms ease;   -o-transition: all 500ms ease;  transition: all 500ms ease;}
/* .page-header.scrolled .header-logo {   height: 56px;} */

ul.web-menu { display: none;}






.projectswrapper { display: flex; gap: 30px; flex-wrap: wrap;}
.projectbox { border: solid 1px var(--bordercolor); position: relative; flex: 1 1 100%; display: flex ; flex-direction: column; }
.project-image { height: 200px; width: 100%;}
.project-image img { object-fit: cover; width: 100%; height: 100%;}
.project-data{padding: 10px 0;width: 100%;display: flex;flex-direction: column;}
.project-logo {width: 70px;height: 70px;margin: auto;}
.project-logo img { width: 100%; height: 100%; object-fit: contain;}
.project-location {text-align: center;font-size: 13px;padding: 10px 20px;}
.project-details {border-top: solid 1px var(--bordercolor); display: flex;flex-wrap: wrap;}
.project-detailbox:nth-child(4n) { border-right: none; }
.project-detailbox {flex: 0 0 auto;text-align: center;padding: 5px;width: 25%; border-right: solid 1px var(--bordercolor);  border-bottom: solid 1px var(--bordercolor);}
.project-detail-data {font-size: 14px;}
.project-detail-label {font-size: 14px;font-weight: 500;}
.project-action {padding: 10px 10px 0;margin-top: auto;}






@media (min-width: 728px) {


.projectswrapper {}
.projectbox {flex-direction: row;}
.project-image {  width: 50%;  height: 322px;}
.project-image img {}
.project-data{  width: 50%;}
.project-logo {}
.project-logo img {}
.project-location {}
.project-details {}
.project-detailbox:nth-child(4n) {}
.project-detailbox {}
.project-detail-data {}
.project-detail-label {}
.project-action {}


}




.unit-tabs-wrapper { display: flex;  gap: 20px;  align-items: flex-start; flex-direction: column;}
.unit-tabs-wrapper > div {  width: 100%;   flex:0 0 auto}
.unit-wrapper{border: solid 1px var(--bordercolor); position: relative; flex: 1 1 100%;border-bottom:none; padding-top:20px }
.unitbox-logo{width: 70px;height: 70px;margin: auto;}
.unitbox-logo img{ object-fit: contain; width: 100%; height: 100%;}
.unitbox-address{text-align: center;font-size: 13px;padding: 10px 20px;}
.unitbox-rera {font-size: 10px;   margin: 5px auto 0;   border-top: solid 1px var(--bordercolor);   padding-top: 5px; display:inline-block}
.unitbox-details{border-top: solid 1px var(--bordercolor); display: flex;flex-wrap: wrap;}
.unitbox-detailbox{flex: 0 0 auto;text-align: center;padding: 5px;width: 25%; border-right: solid 1px var(--bordercolor);  border-bottom: solid 1px var(--bordercolor);}
.unitbox-detailbox:nth-child(4n) { border-right: none; }
.unitbox-detail-label{font-size: 14px;font-weight: 500;}
.unitbox-detail-data{font-size: 14px;}



.customer-share-details { padding: 10px 0 10px 0px; margin: 0; list-style: none; display: flex;}
.customer-share-details li + li { border-left: solid 1px var(--bordercolor);}
.customer-share-details li { padding: 0px 20px;}
.share-data { font-weight: 500;}
.share-label { font-size: 12px; }

@media (min-width: 728px) { 
    .unit-tabs-wrapper { flex-direction: row; } 
    .unit-tabs-wrapper > div { width: calc(50% - 10px); }
}





.tabs { list-style-type: none;  padding: 0;  margin: 0; display: flex;  border-bottom: solid 1px var(--bordercolor);  width: 100%;}
.tab { padding: 10px; cursor: pointer; border: solid 1px transparent;  border-top: solid 3px transparent;  margin-bottom: -1px;}
.tab.active { border-top-color: var(--primary-color); border-right-color: var(--bordercolor);   border-left-color: var(--bordercolor);  border-bottom-color: #fff;}
.tab-pane {display: none; padding: 10px;}
.tab-pane.active {display: block;}
.tab-content { border: solid 1px var(--bordercolor);  border-top: none;}
.tab-pane ul { padding: 0; margin: 0; list-style: none;}
.tab-pane ul li { display: flex; align-items: baseline; gap: 7px; padding: 5px 0;}
.tab-pane ul li > div:last-child { order: 2;     font-size: 14px; font-weight:500 }
.tab-pane ul li:after { content: ""; flex: 1; border-bottom: dotted 1px var(--bordercolor); order: 1;}
.tab-pane ul li > div:first-child { font-size: 14px; color: var(--lighttext);}

.table-disha { padding: 0; margin: 0; width: 100%;}
.table-disha th, .table-disha td { padding: 4px 10px; text-align: left;}
.table-disha th { font-weight: 500;}
.table-disha  tr:not(:last-child) > th, .table-disha tr:not(:last-child) > td { border-bottom: solid 1px var(--bordercolor);}
















.payment-summary-wrapper { display: flex; gap: 20px;  flex-wrap: wrap;}
.payment-summary-box {flex:  0 0 auto;border-radius: 0px;border: solid 1px var(--bordercolor) !important;width: calc(100%);}
.payment-summary-box-title {background: var(--primary-color);padding: 7px 10px;color: #fff;font-weight: 500;font-size: 14px;position: relative;}
.payment-summary-box-body {padding: 5px 10px;}
.payment-summary-box-record {display: flex;justify-content: space-between;padding: 3px 0;align-items: end;}
.payment-summary-box-label { font-size: 12px;}
.payment-summary-box-value {font-weight: 800;font-size: 12px;}


@media (min-width: 728px) {
    .payment-summary-box {flex: 0 0 auto;border-radius: 0px;border: solid 1px var(--bordercolor) !important;width: calc(25% - 15px);}

}






























h3 {  padding: 0;   margin: 10px 0 10px;   font-size: 16px;}
h4 {  padding: 0;   margin: 10px 0 5px;  font-size: 14px;}




.custom-accordian-box {  border: solid 1px var(--bordercolor);}
.custom-accordian-box + .custom-accordian-box {  margin-top: 15px;}
.custom-accordian-header {  border-bottom: solid 1px var(--bordercolor);   position: relative;    padding: 7px;}
.custom-accordian-body {  padding:0 10px ;  overflow: hidden; height: 0;}
.custom-accordian-box.active .custom-accordian-body {padding: 10px; height: auto;}
.custom-accordian-close { position: absolute;  top: 7px; right: 7px;  display: flex; width: 40px;  height: 40px;  align-items: center; justify-content: center;}
.custom-accordian-box.active .custom-accordian-close {transform: rotate(180deg);}

.custom-accordian-userbox { display: flex;  gap: 10px;  align-items: center;}
.custom-accordian-user-image {   flex: 0 0 40px;  width: 40px;   height: 40px;  border-radius: 20px;  overflow: hidden;}
.custom-accordian-user-image img {   width: 100%;  height: 100%;   object-fit: cover;}
.custom-accordian-user-imagemask {  background: var(--bordercolor);  display: block;   width: 100%;   height: 100%;}
.custom-accordian-user-data {   flex: 1;   font-weight: 500;}






.customer-details-wrapper { display: flex; flex-direction: column; gap: 30px;}
.customer-payment-details { width: 100%;}
.customer-details { width: 100%;}
.frontend-payment-table { width: 100%; border-collapse: collapse;}
.frontend-payment-table th { font-size: 11px; font-weight: 500; white-space: nowrap; color: var(--lighttext); text-align: right;  padding: 4px 7px; background: var(--bordercolor);}
.frontend-payment-table td { font-size: 12px; text-align: right; padding: 4px 7px;    border-top: solid 1px var(--bordercolor);}



 @media (min-width: 728px) {  
    .customer-details-wrapper {flex-direction:row}
    .customer-payment-details { width: 50%;}
    .customer-details { width: 50%;}
 }






















/* 


.transaction-list { padding: 0; margin: 0; list-style: none;}
.transaction-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 15px; padding: 5px 10px; margin: 0 -10px;}
.transaction-date { font-size: 12px; flex: 1 1 100%;}
.transaction-details { flex: 1 1 80%; font-size: 11px; order: 10; display: flex;}
.transaction-details span:not(:first-child) { border-left: solid 1px var(--lighttext);}
.transaction-details span { padding: 0 8px; line-height: 1.2;}
.transaction-customer { font-size: 14px; flex: 1 0 50%; font-weight: 500;}
.transaction-amount { flex: 0 0  60px; font-size: 12px; font-weight: 400; text-align: right;}
.transaction-status { flex: 0 0 60px; font-size: 11px; text-align: center; border-radius: 2px; background: var(--bordercolor);}
.transaction-cr_db { flex: 0 0  0; font-size: 10px; order: 11;}
.transaction-remark {order: 12;flex: 1 1 100%; font-size: 11px; background: #FEEFDF; padding: 2px 10px; border-radius: 2px;}

.transaction-status.success {     background: #049534;     color: #fff; }
 .transaction-cr_db.credit {     color: #049534;}
.transaction-list li+ li { border-top: solid 1px var(--bordercolor);}
 */



 .transaction-list{padding: 0; margin: 0; list-style: none; border: solid 1px var(--bordercolor);}
 .transaction-list li{ display: flex; flex-direction: column; gap: 3px 15px; padding: 7px 10px;  }
 .transaction-list li.divider{background: var(--bordercolor);}
 .transaction-list li+ li { border-top: solid 1px var(--bordercolor);}
  .transaction-date{ font-size: 12px; flex: 1 1 100%; }
 .transaction-customerbox{ display: flex; align-items: center; justify-content: space-between; }
 .transaction-customer{ font-size: 12px; flex: 1 0 auto; font-weight: 500; }
 .transaction-amount{ flex: 0; font-size: 12px; font-weight: 400; text-align: right; }
  
 .transaction-details-wrapper{ display: flex; flex-direction: column; gap: 6px; }
 .transaction-details{}
 .transaction-details span{ padding: 0 8px 0 0;  font-size: 11px; line-height: 1.2; }
 .transaction-details span:not(:first-child) { border-left: solid 1px var(--lighttext);  padding: 0 8px;}
 
 
 .transaction-action{display:flex; align-items:center;gap:5px}
 .transaction-cr_db{}
 .transaction-status{ font-size: 11px; text-align: center; border-radius: 2px; background: var(--bordercolor); padding: 0 10px;     line-height: 21px; }
 .transaction-action a{ padding: 3px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; color: #fff; text-decoration: none; background-color: #f39c12; border-color: #e08e0b; line-height: 15px;
    display: inline-block;}
 .transaction-action a:hover { background-color: #e08e0b; }
 .transaction-remark{flex: 1 1 100%; font-size: 11px; background: #FEEFDF; padding: 2px 10px; border-radius: 2px;}
 .transaction-cr_db.credit {color: #049534;font-size: 10px;}
 .transaction-status.success {     background: #04953422;     color: #049534; }
 .transaction-status.reject {     background: #dd4b3922;     color: #dd4b39; }
 .transaction-status.pending {     background: #f39c1222;     color: #f39c12; }
 
 .badge {display: inline-block; min-width: 10px; padding: 3px 7px;  font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: middle; background-color: #777; border-radius: 10px;}
 
 @media (min-width: 728px) { 
    .transaction-details-wrapper{ display: flex; flex-direction: row; align-items:center; justify-content:space-between}
 }
 

















 .btn2{ padding: 3px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; color: #fff; text-decoration: none; background-color: #f39c12; border-color: #e08e0b; line-height: 15px;
    display: inline-block; border: solid 1px #e08e0b;}
 .btn2:hover { background-color: #e08e0b; }


.redtext{ color: #dd4b39;}


 .document-list { padding: 0 0 30px;   margin: 0;  list-style: none;}
 .document-list li {display: flex;flex-direction: row;gap: 10px;border: solid 1px var(--bordercolor);padding: 8px;align-items: center;flex-wrap: wrap;justify-content: space-between;gap: 10px;}
 .document-list li + li {
    margin-top: 5px;
}
 .document-type{
     width: 50%;
     font-weight: 500;
 }.document-status{ flex: 0 0 auto;}
 .document-status span{
    background: #dd4b3922;
    color: #dd4b39;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 2px;
 }
 .document-summary{
     flex: 0 0 auto;
     font-size: 12px; min-width:100px
 }
 .document-action{text-align: right;}
 
  @media (min-width: 728px) { 
     .document-type{
     flex: 1 0 auto;
 }
 .document-status{width: 140px;}
 .document-summary{
     width: 120px;
 }
 .document-action{
     width: 200px;
 }
 
  }
 










ul.customer_details {
    padding: 0;
    margin: 0;
    list-style: none;
}


ul.customer_details li {
    display: flex;
    gap: 10px;
    padding: 4px 0;
    border-bottom: dotted 1px var(--bordercolor);
}

.customer_details_label {
    flex: 0 0 132px;
    font-size: 12px;
    color: var(--lighttext);
}

.customer_details_data {
    flex: 1;
    font-size: 12px;
}




.btn3{ padding: 3px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; color: #fff; text-decoration: none; background-color: #0080C6; border-color: #0071af; line-height: 15px;
    display: inline-block; border: solid 1px #0071af;}
 .btn3:hover { background-color: #0071af; }












.profile-box-wrapper {
    display: flex;
    gap: 30px;
    flex-direction: column;
    border: solid 1px var(--bordercolor);
    align-items: start;
}
.profile-box-image {
    max-width: 200px;
    /* max-height: 200px; */
    margin: 0 auto;
    padding: 20px;
}

.profile-box-image img {
    max-width: 200px;
    max-height: 200px;
}

.profile-box-data {
    padding: 0 20px 10px;
}



@media (min-width: 728px) {
.profile-box-wrapper {flex-direction: row;}
.profile-box-image{flex: 0 0 200px}
.profile-box-data{flex:1 0 auto}

.profile-box-data {
    padding: 20px 20px 10px;
}
}

.pt30{padding-top: 30px;}

.document-photo {
}

.document-photo img {
    max-width: 100%;
}

.document-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px; 
}

.document {}

.document-name {
    background: var(--bordercolor);
    padding: 5px 10px;
    text-align: center;
}

@media (min-width: 728px) {
.document-wrapper {flex-direction: row;}
.document {max-width:400px}
}







.modal { display: none; position: fixed; z-index: 100000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5);        }
        .modal-content {background-color: #fefefe;margin: 15% auto;padding: 20px;border: 1px solid #888;max-width: 500px;text-align: center;border-radius: 10px;}
        .modal-header {margin-bottom: 15px;text-align: center;
            font-size: 17px;
            font-weight: 600;
            color: #f47920;
            padding-bottom: 5px;}
        .modal-footer { margin-top: 20px;        }



 .btn-cancel{
    padding: 3px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    color: #e08e0b;
    text-decoration: none;
    background-color: transparent;
    border-color: #e08e0b;
    line-height: 15px;
    display: inline-block;
    border: solid 1px;
    }
 .btn-cancel:hover { background-color: #e08e0b; color: #fff;  }