:root {
  --prm-color: #604ae3;
  --prm-gray: #b1b1b1;
}
section{
  width:100%;
}
.steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  position: relative;
}
.step-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  /* background-color: var(--prm-gray); */
  transition: .4s;
  padding-top: 15px;
}
.step-button.current {
  border: 2px solid #604AE3;
  background: #f9f9fc;
  color: #5D7186;
}
.step-item {
  z-index: 10;
  text-align: center;
}
#progress {
  position: absolute;
  width: 95%;
  z-index: 5;
  height: 5px;
  margin-left: 18px;
  margin-bottom: 18px;
  appearance: none;
}
/* to customize progress bar */
#progress::-webkit-progress-value {
  background-color: #604AE3;
  transition: .2s ease;
}
#progress::-webkit-progress-bar {
  background-color: #eee;
}


/*Choice Select Valid Invalid CSS Start*/
.was-validated .choices__inner.invalid, .was-validated .dropzone-box.invalid {
  border-color: var(--bs-form-invalid-border-color);
  padding-right: calc(1.5em + 1rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23e96767'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e96767' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(2.375em + 0.25rem) center;
  background-size: calc(0.75em + 0.5rem) calc(0.75em + 0.5rem);
}
.was-validated .choices__inner.valid, , .was-validated .dropzone-box.valid {
  border-color: var(--bs-form-valid-border-color);
  padding-right: calc(1.5em + 1rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%235cc184' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(2.375em + 0.25rem) center;
  background-size: calc(0.75em + 0.5rem) calc(0.75em + 0.5rem);
}
/*Choice Select Valid Invalid CSS End*/

/*Radio Box Label Valid Invalid CSS Start*/
.was-validated .form-check-input ~ .form-check-label.btn-outline-primary{
  color: var(--bs-btn-active-bg);
}
.was-validated .form-check-input:checked ~ .form-check-label.btn-outline-primary{
  color: #fff;
}

.was-validated .form-check-input:invalid ~ .form-check-label.btn-outline-primary{
  border-color: var(--bs-form-invalid-color);
  color: var(--bs-form-invalid-color);
}
/*Radio Box Label Valid Invalid CSS End*/

.owner-card-address {
  min-height: 63px !important;
}

/*Custom Dropzone CSS*/
.dropzone-box{
  border: 2px dashed var(--bs-border-color);
  background: var(--bs-secondary-bg);
  border-radius: 6px;
  cursor: pointer;
  min-height: 150px;
  padding: 20px;
}
.dropzone-box .dz-message {
  text-align: center;
  margin: 2rem 0;
}
.dropzone-box .dz-preview.dz-image-preview {
  background: #fff;
}
.dropzone-box .dz-preview {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 16px;
  min-height: 100px;
}
.dropzone-box .dz-preview .dz-image {
  border-radius: 20px;
  overflow: hidden;
  width: 120px;
  height: 120px;
  position: relative;
  display: block;
  z-index: 10;
}
.dropzone-box .dz-preview.dz-image-preview .dz-details {
  -webkit-transition: opacity .2s linear;
  -moz-transition: opacity .2s linear;
  -ms-transition: opacity .2s linear;
  -o-transition: opacity .2s linear;
  transition: opacity .2s linear;
}
.dropzone-box .dz-preview .dz-details {
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  font-size: 13px;
  min-width: 100%;
  max-width: 100%;
  padding: 2em 1em;
  text-align: center;
  color: rgba(0, 0, 0, .9);
  line-height: 150%;
}
.dropzone-box .dz-preview:hover .dz-details {
  opacity: 1;
}
.dropzone-box .dz-preview .dz-details .dz-size {
  margin-bottom: 1em;
  font-size: 16px;
}
.dropzone-box .dz-preview .dz-details .dz-filename span, .dropzone-box .dz-preview .dz-details .dz-size span {
  background-color: rgba(255, 255, 255, .4);
  padding: 0 .4em;
  border-radius: 3px;
}
.dropzone-box .dz-preview .dz-details .dz-filename:not(:hover) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropzone-box .dz-preview .dz-details .dz-filename {
  white-space: nowrap;
}
.dropzone-box .dz-preview .dz-details .dz-filename:not(:hover) span {
  border: 1px solid transparent;
}

.dropzone-box .dz-preview .dz-details .dz-filename span, .dropzone-box .dz-preview .dz-details .dz-size span {
  background-color: rgba(255, 255, 255, .4);
  padding: 0 .4em;
  border-radius: 3px;
}
label.dropzone-box{left: 0;}

.topbar #light-dark-mode .light-mode {
  display: inline;
}
[data-bs-theme=dark] .topbar #light-dark-mode .dark-mode {
  display: inline;
}
[data-toggle=fullscreen] .fullscreen {
  display: inline;
}
.fullscreen-enable .fullscreen {
  display: none;
}
.fullscreen-enable .quit-fullscreen {
  display: inline;
}

/*Inline Label CSS*/
label{
  top: 10px;
  background-color: var(--bs-secondary-bg);
  /*background-color: transparent;*/
  padding-right: 5px;
  padding-left: 5px;
  left: 7px;
  position: relative;
  font-size: 13px;
  font-weight: 500;
  z-index: 1;
}
div:has(select) > label{
  /*top: 15px;*/
  z-index:1;
}
div:has(input[type="checkbox"]) > label{
  top: -1px;
  left: -5px;
}
div:has(input[type="radio"]) > label{
  top: -1px;
  left: -5px;
}
div.form-switch:has(input[type="checkbox"]) > label, div.form-switch:has(input[type="radio"]) > label{
  left: -5px;
}
div.d-flex:has(input[type="checkbox"]) > label, div.d-flex:has(input[type="radio"]) > label{
  left: 7px;
}

.choices__inner{
 line-height: 2;
}
.form-control{line-height: 2;}

div:has(input[type="text"]:required) > label::after, div:has(input[type="email"]:required) > label::after, div:has(input[type="password"]:required) > label::after,div:has(input[type="number"]:required) > label::after, div:has(textarea:required) > label::after, div:has(select:required) > label::after {
  content: " *";
  color: red;
}
.error-color {
  color: var(--bs-form-invalid-color);
}
.form-check-input:not(:checked) ~ .availability-time-selection {
  /*visibility: hidden;*/
  display: none;
  margin: 1rem !important;
}
.availability-week-label{
  margin: auto;
  position: relative;
  top: -45px !important;
}
.availability-time-selection.noUi-horizontal .noUi-tooltip {
  right: auto !important;
}

.dataTables_wrapper .dataTables_length{
  /*display: contents;*/
  margin: 0 0 0 0 !important;
}
.dataTables_wrapper .dataTables_filter{
  margin: 0px 10px 20px 0 !important
}
.dataTables_wrapper .dataTables_info{
  /*width: 32em !important;*/
  margin-top: 20px !important;
  text-align: start !important;
  font-weight: 600;
  width: 100% !important;
}
.dataTables_wrapper .dataTables_paginate{
  margin-top: 20px !important;
}
table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting:after{
  opacity: 0.3 !important;
}
table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:after{
  opacity: 0.6 !important;
  color: #604ae3;
}
.back-icon{position: relative; top: 2px;}
.modal-faded {
  opacity: 0.3;
  pointer-events: none; /* optional: prevent interaction */
}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label{color: inherit;}
.swal2-styled.swal2-confirm.unsaved-confirm{background-color: #6e7881 !important;}
.avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #6c757d;
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 32px;
  font-size: 16px;
}
.avatar-circle.avatar-icon {
  width: 56px;
  height: 56px;
  line-height: 56px;
  font-size: 24px;
}
.profile-circle {
  background: #6c757d;
  color: white;
  font-weight: bold;
  text-align: center;
  font-size: 40px;
  align-items: center;
  justify-content: center;
  display: flex;
}
form .dropdown-menu .form-check {
  padding: 8px 25px
}
.checkbox-label {
    top: 10px !important;
    z-index: 1;
    left: 5px !important;
}
.widget-card-height{height: 135px;}
.text-left{text-align: left;}
.dtr-details{width: 100%;}
.choices__list--single .choices__item{ padding-right: 10px; }
.utility-selection{gap: 0.5rem;}
.utility-selection input{top: -5px;}
.square-radio .check-icon {
  position: absolute;
  transform: translateY(-80%);
  width: 1rem;
  height: 1rem;
  border: 2px solid #604ae3;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
}
.btn-check:checked + .square-radio .check-icon::after {
  content: "✔";
  display: block;
  color: #604ae3;
  font-size: 0.7rem;
  text-align: center;
  line-height: 0.8rem;
}

.square-radio-large .check-icon {
  width: 1.5rem;
  height: 1.5rem;
  top: -5px;
}


.btn-check:checked + .square-radio-large .check-icon::after {
  font-size: 1rem;
  line-height: 1.3rem
}

.was-validated .btn-check:invalid + .square-radio .check-icon {
  border-color: var(--bs-form-invalid-border-color);
}

.choices__heading{
  font-size: 16px;
}
ul.nav.form-tabs li a.min-height-6-4 {min-height: 6.4em;}
ul.nav.form-tabs{flex-wrap: nowrap !important; overflow-x: scroll; overflow-y: hidden; scrollbar-width: none;}

.lh-0{line-height: 0;}

.lease-form{
    background: #eee;
    padding-top: 15px;
    padding-bottom: 15px;
}
.alert-custom {
  border-left: 5px solid #f0ad4e; /* Bootstrap warning color */
  background-color: #fff8e1;      /* pale yellow background */
}
.input-group input[type='number']:focus,  .basic-datepicker:focus {
  z-index: 0 !important; /* keep input behind the label */
}
.paid-logo {
    position: absolute;
    right: 0;
    left: 30%;
    bottom: 43%;
    opacity: 0.2;
    width: 40%;
    height: auto;
    z-index: 2;
}
.template-body [data-tag-autocomplete-target=editor]{height: 200px;}
.template-body [data-tag-autocomplete-target=suggestions]{
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  width: 250px;
}
.nav-link:hover, .nav-link:focus{font-size: 16px;}
.property-sub-type{min-width: 150px;}
#password-rules{padding-right: 2rem;}

/* TinyMCA bar */
.tox-statusbar{display: none !important;}

td.wrap-text {
  white-space: normal !important;
  max-width: 20%;
}

/*MEDIA CSS*/
@media (min-width: 481px) {
  .availability-selection{align-items: center !important;}
  .availability-time-selection{margin: 3.75rem !important;}
  .fab-container .fab-menu div{display: inline-block;}
  .fab-container .fab-toggle{display: none;}
}
@media (min-width: 640px) {
  .choices__list--dropdown .choices__item--selectable, .choices__list[aria-expanded] .choices__item--selectable {
    padding-right: inherit;
  }
}
@media (min-width: 768px) {
  .modal-dialog{max-width: 50%;}
  .w-md-auto{width: auto !important;}
}
@media (max-width: 480px) {
  label{
    /*background-color: transparent;*/
  }
  .step-button {
    width: 35px;
    height: 35px;
    padding-top: 6px;
    padding-left: 13px;
  }
  .step-title{ display: none; }
  #progress {
    margin-bottom: 0px;
    margin-left: 14px;
  }
  .icon-box{width: auto; left: 0 !important;}
  .availability-selection label{margin-top: -15px;}
  .availability-time-selection{margin-left: -15px; margin-top: 45px; margin-bottom: 45px;}

  .fab-container {
    position: fixed;         /* <--- this makes it fixed on screen */
    bottom: 20px;
    right: 20px;
    z-index: 1055;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
  }
  .fab-container .fab-menu {display: none;}
  .fab-container .fab-menu div{margin-bottom: 0.625rem !important; margin-right: 0.625rem !important;}
  .fab-toggle, .fab-menu button, .fab-menu a {pointer-events: auto;}
  .fab-toggle {
    width: 56px;
    height: 56px;
    font-size: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (max-width: 640px) {
  .dataTables_wrapper .dataTables_filter {
    margin-top: 0.5em !important;
  }
  .dataTables_paginate .paginate_button:nth-child(n+4):not(.next) {
    display: none !important;
  }

  /* On mobile: make each row a card */
  .mobile-responsive-table thead {
    display: none; /* hide headers */
  }

  .mobile-responsive-table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 8px;
  }

  .mobile-responsive-table td {
    display: block;
    text-align: right;
    border: none;
    border-bottom: 1px solid #eee;
  }

  .mobile-responsive-table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }

  .mobile-responsive-table td:last-child {
    border-bottom: none;
  }

  /* tile wrapper */
  .btn-group > div {
    width: 100%;
    min-width: 0; /* allow shrinking if needed */
  }

  /* make label fill entire tile */
  .btn-group .icon-box {width: 100%;}
   table.dataTable td .dtr-data {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    /*display: inline-block; */
    max-width: 100%;
  }

  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
      right: 5%;
      position: absolute;
      margin-top: 20px;
  }
  .square-radio-large .check-icon {
      width: 1.5rem;
      height: 1.5rem;
      top: -5px;
  }

  .btn-check:checked + .square-radio-large .check-icon::after {
      font-size: 0.7rem;
      line-height: 1.2rem;
  }

}