#responseBox{
    position: absolute;
    right: 25px;
    top: 5px;
}

.loader-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    top: 0;
    left: 0;
    display:flex;
    justify-content:center;
    align-items:center;
}
.form-select{font-size: .845rem;}
.spinner {
    width: 80px;
    height: 80px;
    border: 10px solid #fff;
    border-top: 10px solid #3498db;
    border-radius: 50%;
    animation: spin 1s infinite linear;
}
.required-field::after{
  content: " *";
  color: red;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.modal-backdrop.show{
    display: none;
}

body.modal-open .nxl-container, body.modal-open .nxl-header, body.modal-open .nxl-navigation, body.modal-open .page-header{
    filter: none !important;
}

.icon-img{
    width: 30px;
    height: 30px;
}

#proposalList  .table-container {
  max-width: 100%; /* Or a specific width */
  overflow-x: auto; /* Enables horizontal scrolling */
}

#proposalList  table {
  border-collapse: collapse;
  width: max-content; /* Ensures the table can be wider than the container */
}

/* Target the sticky column cells */
#proposalList  .sticky-right {
  position: sticky;
  right: 0;
  background: #fff; /* Add a background color to prevent content from showing through */
  z-index: 1;       /* Ensure the sticky column is above other cells */
  border-left: 1px solid #ddd; /* Optional: visual separation */
}

/* Ensure header cell has a higher z-index for vertical scrolling (if applicable) */
#proposalList  .sticky-right.header-cell {
  z-index: 2;
}

.check-rooms-box{
    background-color: #A0D7A6;
    border-radius: 10px;
    width: 150px;
    margin: 0.5rem;
    padding: 10px;
    cursor: pointer;
    position: relative;
    text-align: center;
    color: #000;
}

/* Hide the default checkbox */
.hidden-checkbox {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.rooms-filter{background-color: #eee;padding-top: 15px;padding-bottom: 15px;margin-bottom: 10px;border-radius: 10px; justify-content: center; align-items: center;}

.room-availability-label ul{
    display: flex;
    gap: 30px;
    margin-top: 20px;
    padding-left: 0 !important;
    margin-bottom: 20px;
}
.room-availability-label ul li{list-style: none;display: flex; align-items: center;}
.room-availability-label ul li::before{
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 6px;
}
.room-availability-label ul li.booked-color::before{background-color: #dadada;}
.room-availability-label ul li.available-color::before{background-color: #94d093;}
.room-availability-label ul li.maintenance-color::before{background-color: #e2df6b;}
.room-availability-label ul li.selected-color::before{background-color: #30752b;}
#selectedRoomsCount{
    position: relative;
    z-index: 999;
    width: 30px;
    height: 30px;
    background: #30752b;
    display: flex;
    border-radius: 50%;
    justify-content: center;
    color: #fff;
    font-weight: normal;
    font-size: 18px;
    align-items: center;
}
#filterfloors{
    max-width: 170px;
}

.check-rooms-box:has(.hidden-checkbox:checked){
    background-color: #30752b;
    color: #fff;    
}

.room-disabled-num{
    background-color: #ddd;
}

.booking-details-info .header {
    text-align: center;
    margin-top: 30px;
}
.booking-details-info .card {
    background: #fff;
    padding: 20px;
    margin-top: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.booking-details-info .title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}
.booking-details-info .btn-group {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}
.booking-details-info .btn {
    padding: 14px 16px;
    border-radius: 40px;
    font-size: 10px;
    display: inline;
    margin: 0 10px;
    cursor: pointer;
    border: none;
}
.booking-details-info .checkin { background: #4CAF50; color: white; }
.booking-details-info .checkout { background: #FF4F4F; color: white; }
#bookingform .btn{
    text-transform: inherit;
    background-color: #64748b ;
    border-color: #64748b;
    border-radius: 50px;
    padding: 15px 40px;
    font-size: 14px;
    color: #fff;
}
.btn-primary{
    background-color: #333 !important;
    border-color: #333 !important;
    color: #fff;
}
#insertdata .room-type-list{margin-top: 30px;}
.room-filter-item{display: flex;justify-content: center;align-items: center;gap: 10px;}
.nxl-header .header-wrapper .nxl-h-item, .nxl-header{min-height: 60px;}
.nxl-navigation .m-header{height: 61px;}
.nxl-container{top: 60px;}
.avatar-image, .avatar-text{width: 35px  !important;height: 35px  !important;min-width: 35px;min-height: 35px;font-size: 1.1rem !important;}

.booking-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-left: 5px solid #0d6efd;
    margin-bottom: 15px;
    transition: 0.3s;
}

.booking-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.booking-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.booking-card .card-header h5 {
    margin: 0;
    font-weight: 600;
}

.booking-card .status {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    margin-left: 10px;
}

.booking-card .status.requested {
    background: #fff3cd;
    color: #856404;
}

.booking-card .card-body {
    margin-top: 10px;
}

.booking-card .guest {
    font-size: 15px;
    margin-bottom: 10px;
}

.booking-card .guest span {
    margin-left: 10px;
    color: #555;
}

.booking-card .dates {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.booking-card .dates div {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 8px;
    width: 48%;
}

.booking-card .dates label {
    font-size: 12px;
    color: #888;
}

.booking-card .dates p {
    margin: 0;
    font-weight: 500;
}

.inactive-property:hover{
    background-color: aliceblue;
}

/* .active-property{
    background-color: #f1f7bd;
} */

.active-property:hover{
    background-color: aliceblue;
}

.inactive-property:hover h3,
.active-property:hover h3{
    color:#00a4c1;
}
.property-icon-box{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bg-success-light-text{
    background-color: #E5F9ED;
    color: #57936E;
}

.bg-warning-light-text{
    background-color: #E9F3FF;
    color:#6B8BD4; 
}
.bg-secondary-light-text{
    background-color: #E9E9F5;
    color: #4C4F58;
}
.bg-danger-light-text{
    background-color: #f8c5c5;
    color: #d43f3f;
}
.bg-info-light-text{
    background-color: #e5f7f9;
    color: #578a93; 
}

.user-arrow-dropdown{
    display: flex;
    /* flex-direction: row; */
    justify-content: center;
    align-items: center;
}

.user-arrow-dropdown:hover .bi-chevron-down{
    transform: rotate(180deg);
}

.user-arrow-dropdown .bi-chevron-down{
    transition: all .4s ease-in-out;
    margin-left: 0.3rem;
}

.nxl-container-fluid{
    padding-top: 80px;
    height: 100%;
}

.nxl-container-fluid .nxl-content{
    height: 100%;
}
.nxl-container .nxl-content .main-content{
    padding: 20px 20px 5px;
}
.nxl-container-fluid .nxl-content .main-content {
    overflow-x: hidden;
    padding: 20px 20px 5px;
}

.nxl-container-fluid .footer {
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-top: 1px solid #e5e7eb;
}

.nxl-container-fluid .footer {
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-top: 1px solid #e5e7eb;
}

#bookingcheckoutdate1,
#bookingcheckindate1{
    background-color: #fff;
    max-width: 120px;
}

#nights{
    max-width: 70px;
}

.room-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

.room-price {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}

.room-details {
    font-size: 12px;
    display: flex;
    gap: 6px;
    align-items: center;
}
#formGroupExampleInput4,
#formGroupExampleInput3{
    background-color: #fff;
}
#show-list-of-properties{
    width: 200px;
}
.first-form1 .filter-option  .form-select,
.first-form1 .filter-option .form-control{
    padding: 6px 7px;
}

.first-form1 .room-filter-item label{
    margin-bottom: 0px;
}
.undar-maintenance{
    background-color: #E7E483;
}

.special-discount-offer{
    margin-top: 0.5rem;
}

#todayCheckout,
#todayCheckin{
    width: 30px;
    height: 30px;
    display: flex;
    border-radius: 50%;
    justify-content: center;
    color: #fff;
    font-weight: normal;
    font-size: 18px;
    align-items: center;
}

#todayCheckout{
    background-color: #A0D7A6;
}

#todayCheckin{
    background-color: #797777;
}

.payment-status-text-box{
    position: absolute;
    top: 50%;
    right: 100px;
}

.chart-progressbar{
    margin: 10px 30px;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
    border-radius: 12px;
}
.chart-progressbar .col-lg-2{
    margin: 0;
    padding: 15px;
}
.bg-success-light-color{
    background-color: #d1e7dd !important;
}
.bg-warning-light-color{
    background-color: #f8f5d7 !important;
}

.indication-highlight{
    position: absolute;
    top: 4px;
    right: 10px;
    z-index: 1;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #d1d1d1;
}

@media (max-width: 768px){
    #show-list-of-properties{
    width: 130px;
    }
    .user-arrow-dropdown span.fw-medium{
        display: none;
    }
}