@charset "utf-8";
/* CSS Document */
.full-img { position:relative;}
.full-img img{ width:100%; height:auto; position:relative; z-index:2;}

#page{ overflow:hidden; padding-top:116px;}
.ratio .full-img{min-width:initial; position:absolute; top:0; right:0; bottom:0; left:0; overflow:hidden; flex:0 0 auto; display:flex;}
.ratio .full-img img{flex:1 1 auto; align-self:center; justify-self:center; object-fit:cover; height:100%; min-width:100%; width:auto;}
.image-fit{min-width:initial; position:relative; overflow:hidden; flex:0 0 auto; display:flex;}
.image-fit img{flex:1 1 auto; align-self:center; justify-self:center; object-fit:cover; height:100%; min-width:100%; width:auto;}
.color-fff{ color:var(--bs-white);}
.title-uppercase h1, .title-uppercase h2, .title-uppercase h3, .title-uppercase h4, .title-uppercase h5, .title-uppercase h6{ text-transform:uppercase;}
.title-primary h1, .title-primary h2, .title-primary h3, .title-primary h4, .title-primary h5, .title-primary h6{ color:var(--bs-primary);}
.title-secondary h1, .title-secondary h2, .title-secondary h3, .title-secondary h4, .title-secondary h5, .title-secondary h6{ color:var(--bs-secondary);}
.title-dark h1, .title-dark h2, .title-dark h3, .title-dark h4, .title-dark h5, .title-dark h6{ color:var(--bs-dark);}


.sidebar{ position: fixed; top: 0; left: 0; bottom: 0; display: flex; flex-direction: column; background-color: #fff; z-index: 1000; width: 320px;}
.sidebar .logo{ height: 210px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #dddfe1; min-height: 210px;}
.sidebar .navigation{ flex-grow: 1; overflow-y: auto;}
.mainNav {width:100%; font-family: var(--bs-heading-font);}
/* First Level */
.mainNav ul {margin:0; padding:0; list-style:none;}
.mainNav ul li {border-bottom: 1px solid #dddfe1;}
.mainNav > ul > li{ border:none; border-bottom:1px solid #dddfe1;}
.mainNav > ul > li > a{ color: #000; display: flex; align-items: center;}
.mainNav > ul > li > a span{ margin-right: 6px;}
.mainNav ul  li a:hover, .mainNav ul  li.current-menu-item a{ color:var(--bs-primary);}
.mainNav ul li a {color:var(--bs-black); display:flex; align-items: center; line-height:normal; padding:14px 20px 14px 20px; text-decoration:none;}
.mainNav ul li a:hover,.mainNav ul li a.active {color:var(--bs-white); text-decoration:none; background-color: var(--bs-secondary);}
/* Second Level */
.mainNav ul ul {border-bottom:none;}
.mainNav ul ul li {background: #ddedf8;}
.mainNav ul ul li a {color:var(--bs-black); display:flex; align-items: center; line-height:normal; padding:14px 14px 14px 60px; }
.mainNav ul ul li a:before{ background-color: var(--bs-primary); height: 8px; width: 8px; display: block; margin-right: 6px; content: ''; border-radius: 16px;}
.mainNav ul ul li a:hover {color:var(--bs-black); background-color: #ddedf8;}
/* Third Level */
.mainNav ul ul ul {border-top:1px solid rgba(255,255,255,0.2);;}
.mainNav ul ul ul li {border:none; }
.mainNav ul ul ul li a {padding:12px 24px; }
/* Accordion Button */
ul li.has-subnav .accordion-btn {/*color:var(--bs-white);*/  background:none;  font-size:16px; }

.wrapper{ margin-left: 320px;}

.header{ background-image: url(images/header-bg.png); background-position: top left; background-repeat: no-repeat; background-color: var(--bs-primary); color: #fff; height: 110px; padding: 0 30px; display: flex; align-items: center;}
.action-btn{ margin-left: auto; display: flex; align-items: center;}
.action-btn a{ display: flex; align-items: center; justify-items: center; color: #fff; height: 30px; width: 30px; text-decoration: none; font-size: 24px; position: relative;}
.action-btn a + a{ margin-left: 16px;}
.action-btn a:before{ background-color: var(--bs-danger); height: 8px; width: 8px; border-radius: 20px; position: absolute; top: 0; right: 0; content: '';}
.header .dropdown-toggle{ background: none; border-radius: 0; padding: 0; display: flex; align-items: center; color: #fff; border: none; margin-left: 24px;}
.header .dropdown-toggle .user-img{ border: 2px solid #fff; border-radius: 50%;  overflow: hidden; margin-right: 12px; height: 44px; width: 44px;}
.post-header{ background-color: #fff; padding: 0 30px; height: 100px; display: flex; align-items: center;}
.post-header .page-title{ color: #666666;}
.post-header time{ margin-left: auto; display: flex; align-items: center; color: #000;}
.post-header time i{ margin-right: 8px; font-size: 18px;}
.post-header .btn{ padding: 10px 20px; border-radius: 6px; font-weight: 400; font-size: 16px;}

.body-content{ padding: 30px;}
.body-content .content{ background-color: #fff; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}

.stepper-wrapper {display:flex; justify-content:space-between; margin-bottom:0;}
.stepper-item {position:relative; display:flex; flex-direction:column; align-items:center; flex:1;}
.stepper-item::before {position:absolute; content:""; border-bottom:6px solid #f9f9f9; width:100%; top:27px; left:-50%; z-index:2;}
.stepper-item::after {position:absolute; content:""; border-bottom:6px solid #f9f9f9; width:100%; top:27px; left:50%; z-index:2;}
.stepper-item .step-counter {position:relative; z-index:5; display:flex; justify-content:center; align-items:center; width:58px; height:58px; border-radius:50%; border:1px solid #dddfe1; background:#fff; font-size:14px;}
.stepper-item.active {font-weight:bold;}
.stepper-item.completed .step-counter {border:1px solid var(--bs-primary); background:var(--bs-gradient); color:#fff;}
.stepper-item.completed::after {position:absolute; content:""; border-bottom:6px solid #f9f9f9; width:100%; top:27px; left:50%;}
.stepper-item.completed::before { border-bottom:6px solid #c7e6f8; z-index: 4;}
.stepper-item:first-child::before {content:none; }
.stepper-item:last-child::after {content:none;}
.stepper-item .step-name{ color:#0F172A;}
.stepper-item.completed .step-name{background: linear-gradient(90deg, #D22A30 0%, #8C1C20 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.toggle-btn .btn-primary {
  --bs-btn-color: #464a53;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #dddfe1;
  --bs-btn-hover-color: #464a53;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #3e9bd5;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #464a53;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #3e9bd5;
  display: flex;
  flex-direction: column;
  padding: 40px;
  border-width: 2px;
  border-radius: 10px;
}
.radio-list{ display: flex; justify-content: center; flex-wrap: wrap;}
.next-prev-btn .btn{ width: 172px;}
.next-prev-btn .btn + .btn{ margin-left: auto;}

.footer{ background-color: #fff; padding: 24px; text-align: center; color: #898989; font-size: 14px; position: relative; bottom: 0;width: 100%;}
.footer a{ color: #898989; text-decoration: none;}
.footer a:hover{ color: #000;}

.mobile-sm{ background-color: #fff; height: 90px; padding: 0 16px; display: flex; align-items: center; }
.mobile-sm .menu-btn{ height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; text-decoration: none; color: #000; }
.mobile-sm .logo{ width: 100px; margin-left: auto;}
.offcanvas-header .logo{ width: 100px;}
.mobile-sm .dropdown{ margin-left: auto;}
.mobile-sm .dropdown-toggle{ background: none; border-radius: 0; padding: 0; display: flex; align-items: center;  border: none; margin-left: 24px;}
.mobile-sm .dropdown-toggle .user-img{ border: 2px solid #fff; border-radius: 50%;  overflow: hidden; height: 44px; width: 44px;} 

.login-wrapper{ background-color: #fff;}
.login-header{ height: 180px; background-color: #fff; padding: 0 24px; display: flex; align-items: center; justify-content: center;}
.login-body{ padding: 80px 0; background-position:  center; background-repeat: no-repeat; background-size: cover; color: #fff; text-align: center;}
.login-body .btn-primary{ font-size: 20px; padding-top: 0; padding-bottom: 0; height: 57px; width: 200px; margin-bottom: 24px;}
.login-body a{ font-weight: 500; text-decoration: underline; color: #fff; display: block;}

.search-bar{ background-color: #fff; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
.search-bar .form-control{ background-image: url(images/search.png); background-position: right 15px center; background-repeat: no-repeat; padding-right: 60px; border-radius: 0;}
.search-bar select{ background-color: #f3f3f3; border-color: #f3f3f3; color: #6a707e; border-radius: 0;}
.property{background-color: #fff; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; padding: 16px; display: flex;}
.property .ratio{ border-radius: 15px; width: 264px; margin-right: 16px; overflow: hidden;}
.property .info span{ margin-right: 10px;}
.property ul{ margin: 15px 0; padding: 0; list-style: none;}
.property ul li{ display: flex; align-items: center;}
.property ul li + li{ margin-top: 8px;}
.property ul li:before{ background-color: var(--bs-primary); height: 8px; width: 8px; display: block; margin-right: 6px; content: ''; border-radius: 16px;}
.property .buttons{ z-index: 10; position: absolute; bottom: 16px; right: 16px; display: flex; align-items: center;}
.property .buttons button,.property .buttons a{ height: 40px; width: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: none; background-color: #f3f3f3;}
.property .buttons button:hover,.property .buttons a:hover{ background-color: var(--bs-primary); color: #fff;}
.property .buttons button + button,.property .buttons a + a,.property .buttons a + button,.property .buttons button + a{ margin-left: 12px;}
.property .info{ align-items: center;}
.filter-btn{ height: 50px; width: 50px; align-items: center; justify-content: center; padding: 0; border: none; background: none; margin-left: 10px;}
.search-bar .card-body{ padding: 0; border: none; border-radius: 0; background: none;}

.stat-box{ background-image: url(images/statbox-bg.png); background-position: bottom right; background-repeat: no-repeat; border-bottom: 6px solid #2491cf; border-radius: 6px; height: 157px; padding: 0 45px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; background-color: #fff;}
.stat-box h3{ color: var(--bs-primary);}
.stat-box h6{ font-size: 16px;}
.table-section .title{ margin-bottom: 20px;}
.table-section .title span{ color: var(--bs-primary); font-size: 30px; margin-left: auto;}
/* .table-content .item{ background-color: #fff; border: 1px solid transparent; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; padding: 24px; font-weight: 600; display: flex; align-items: center;}
.table-content .item span + span{ margin-left: auto;}
.table-content .item:hover{ background-color: #f6fafd; border-color: #8fcef2;}
.table-content .item + .item{ margin-top: 8px;}*/

.table-content .item {
    background-color: #fff;
    border: 1px solid transparent;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 16px;
    font-weight: 600;
    display: grid;
    grid-template-columns: 170px 170px 150px 150px;
    gap: 16px;
    align-items: start;
    word-break: break-word;
}

/* Let spans wrap naturally */
.table-content .item span {
    white-space: normal;
}

/* Add spacing between items */
.table-content .item + .item {
    margin-top: 8px;
}

/* Responsive behavior for small screens */
@media (max-width: 576px) {
    .table-content .item {
        grid-template-columns: 1fr; /* Stack all content vertically */
    }

    .table-content .item span {
        text-align: left !important;
    }
}



.box-content{ box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; background-color: #fff;}
.box-content .progress-item + .progress-item{ margin-top: 16px;}
.box-content .progress-item{ color: #6a707e;}
.box-content .request-item{ padding: 20px 16px;}
.box-content .request-item + .request-item{ border-top: 1px solid #d8d8d8;}
.box-content .request-item strong{ display: block;}

@media (min-width:320px) {
h1{ font-size:calc(2.1875rem + ((1vw - 3.2px) * 0.8125));}
h2{font-size:calc(1.875rem + ((1vw - 3.2px) * 0.625));}
h3{font-size:calc(1.5rem + ((1vw - 3.2px) * 0.5));}
h4{font-size:calc(1.1875rem + ((1vw - 3.2px) * 0.3125));}
h5{font-size:calc(1.0625rem + ((1vw - 3.2px) * 0.1875));}
h5{font-size:16px;}
.font-18{font-size:calc(1rem + ((1vw - 3.2px) * 0.125));}
.font-20{font-size:calc(1rem + ((1vw - 3.2px) * 0.25));}
.font-24{font-size:calc(1rem + ((1vw - 3.2px) * 0.5));}
}

@media (min-width:1400px) {
h1, .section-title h2{font-size:48px;}
h2, .section-title h3{font-size:40px;}
h3{font-size:32px;}
h4{font-size:24px;}
h5{font-size:20px;}
h5{font-size:16px;}
.font-18{font-size:18px;}
.font-20{ font-size:20px;}
.font-24{ font-size:24px;}
}

@media (min-width:576px) {
}

@media (min-width:768px) {

}

@media (min-width:992px) {
}

@media (min-width:1200px) {
}

@media (min-width:1400px) {	
}


/* ------------ Custom Styling ------------- */


/* Property Essentials Checkbox Ui */

.utility-toggle-group {
  display: grid;
  gap: 12px;
}

.utility-toggle-btn {
  position: relative;
}

.utility-toggle-btn input {
  display: none;
}

.utility-toggle-btn span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 2px solid #ccc;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  min-width: 100px;
  justify-content: center;
  position: relative;
}

.utility-toggle-btn input:checked + span {
  border-color: #2f80ed;
  background-color: #eaf3ff;
  color: #2f80ed;
}

.utility-toggle-btn .check-icon {
  width: 16px;
  height: 16px;
  display: none;
  color: #2f80ed;
}

.utility-toggle-btn input:checked + span .check-icon {
  display: inline;
}



/* Property Amenities Checkbox UI */

.toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.toggle-btn {
  position: relative;
}

.toggle-btn input {
  display: none;
}

.toggle-btn span {
  padding: 10px 16px;
  border: 1px solid #ccc;
  border-radius: 999px;
  cursor: pointer;
  display: inline-block;
  background-color: #f5f5f5;
  transition: 0.3s;
}

.toggle-btn input:checked + span {
  background-color: #2f80ed;
  color: #fff;
  border-color: #2f80ed;
}


/* Role form styling */

/* Make custom checkboxes */
/* Fully reset default checkbox */
.form-check-input.custom-check {
    appearance: none;
    -webkit-appearance: none; /* Safari */
    -moz-appearance: none;    /* Firefox */
    outline: none;
    margin: 0;
    width: 1.2em;
    height: 1.2em;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}

/* Checked style */
.form-check-input.custom-check:checked {
    background-color: #2491CF;
    border-color: #2491CF;
}





.table-container {
  overflow-x: auto;
}

/* css to make footer stick to bottom */

/* Make the body and wrapper take the full height of the viewport */
html, body {
  height: 100%;
  margin: 0;
}

/* Make the wrapper take the full height */
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Content will take up available space */
.body-content {
  flex: 1;
}

/* Footer stays at the bottom */
footer {
  margin-top: auto;  /* This pushes the footer to the bottom */
}

/*---------------- end here --------------- */


/* ----------- select 2 css */

.select2 {
  display: block !important;
}
.select2-container--default .select2-selection--single {
  height: 49px !important;
  padding: 10px 12px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  right: 10px !important;
  top: 10px !important;
}

.option-capitalize {
  text-transform: capitalize;
}

/* Highlight Select2 on error */
.select2-selection {
    height: 38px; /* adjust to match form-control height */
    padding: 6px 12px;
}

select.is-invalid + .select2 .select2-selection {
    border: 1px solid #dc3545 !important;
    border-radius: 0.25rem;
}

select.is-invalid + .select2 .select2-selection:focus {
    box-shadow: 0 0 0 0.2rem rgba(220,53,69,.25);
}



/* ----------- end here ----------------------- */