* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter-Regular";
  background: var(--bgcolor);
}

p {
  margin: 0 !important;
  font-family: "Inter-Regular";
}

a {
  text-decoration: none;
  font-family: "Inter-Regular";
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Inter-SemiBold";
  color: var(--text-primary);
}

.cursor-pointer {
  cursor: pointer;
}

.active-hotel {
  box-shadow: 2px 12px 15px var(--active-shadow) !important;
  border: 1px solid var(--primary-color) !important;
}
.active-hotel .hotel-name {
  color: var(--primary-color) !important;
}

.common-box-shadow {
  box-shadow: 2px 12px 15px var(--common-shadow);
}

.sub-head {
  font-size: 18px;
  font-family: "Inter-Bold";
}

.main-padding {
  padding-left: 200px;
  padding-right: 200px;
}

.m-top {
  margin-top: 60px;
  margin-bottom: 60px;
}

#booking_details_image_contents_section {
  margin-bottom: 30px;
}

.my-booking-back-btn {
  margin-top: 30px;
  margin-bottom: 10px;
}
.my-booking-back-btn a h3 {
  font-size: 18px;
  text-decoration: none;
  color: var(--text-primary);
}
.custom-swal-popup {
  width: 80vw;
  /* Adjust the width */
  max-width: 480px;
  /* Set a maximum width */
  height: auto;
  /* Adjust height if needed */
}

.custom-swal-popup .swal2-title {
  font-size: 16px;
  /* Customize title font size */
}

.swal2-popup .swal2-title {
  font-size: 18px;
  padding-top: 10px;
}

.swal2-container .swal2-html-container {
  margin-top: 0 !important;
  font-size: 14px;
  padding-top: 10px !important;
}

.swal2-icon.swal2-warning {
  margin-top: 20px;
}

.swal2-icon.swal2-info {
  margin-top: 20px;
}

.swal2-popup .swal2-actions {
  margin: 15px auto !important;
}

.custom-swal-popup .swal2-content {
  margin-top: 0rem !important;
  font-size: 14px;
  /* Customize content font size */
}

.custom-swal-popup .swal2-confirm {
  background-color: #2c5cda;
  /* Customize button background color */
  color: #fff;
  /* Customize button text color */
  border-radius: 5px;
  /* Customize button border radius */
}

.swal2-popup {
  padding: 0rem !important;
}

/* Define custom animations */
@keyframes customPopupIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes customPopupOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}
.custom-swal-popup {
  animation: customPopupIn 0.5s ease-in-out;
  /* Apply the custom animation for showing */
}

.swal2-popup.swal2-hide {
  animation: customPopupOut 0.5s ease-in-out;
  /* Apply the custom animation for hiding */
}

.hotel-filter-price-adjusting .range-slider {
  width: 100%;
  position: relative;
}
.hotel-filter-price-adjusting .range-slider .rangeValues {
  display: block;
}
.hotel-filter-price-adjusting input[type=range] {
  -webkit-appearance: none;
  border: 1px solid white;
  width: 100%;
  position: absolute;
  left: 0;
}
.hotel-filter-price-adjusting input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}
.hotel-filter-price-adjusting input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--secondary-color);
  margin-top: -6px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  box-shadow: none !important;
}
.hotel-filter-price-adjusting input[type=range]:focus {
  outline: none;
}
.hotel-filter-price-adjusting input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}
.hotel-filter-price-adjusting input[type=range]::-moz-range-track {
  width: 300px;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}
.hotel-filter-price-adjusting input[type=range]::-moz-range-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #21c1ff;
}
.hotel-filter-price-adjusting input[type=range]:-moz-focusring {
  outline: 1px solid white;
  outline-offset: -1px;
}
.hotel-filter-price-adjusting input[type=range]::-ms-track {
  width: 300px;
  height: 5px;
  background: transparent;
  border-color: transparent;
  border-width: 6px 0;
  color: transparent;
  z-index: -4;
}
.hotel-filter-price-adjusting input[type=range]::-ms-fill-lower {
  background: #777;
  border-radius: 10px;
}
.hotel-filter-price-adjusting input[type=range]::-ms-fill-upper {
  background: #ddd;
  border-radius: 10px;
}
.hotel-filter-price-adjusting input[type=range]::-ms-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #21c1ff;
}
.hotel-filter-price-adjusting input[type=range]:focus::-ms-fill-lower {
  background: #888;
}
.hotel-filter-price-adjusting input[type=range]:focus::-ms-fill-upper {
  background: #ccc;
}

/* Center the spinner in the middle of the screen */
#loadingSpinner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(78, 76, 76, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  /* Initially show the spinner */
  display: flex;
}

/* Create the spinner animation */
.spinner {
  border: 8px solid #f3f3f3;
  /* Light grey border */
  border-top: 8px solid #121b21;
  /* Blue border */
  border-radius: 50%;
  width: 45px;
  height: 45px;
  animation: spin 2s linear infinite;
}

/* Spinner animation keyframes */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Loading Spinner Container */
@media (max-width: 1600px) {
  .main-padding {
    padding-left: 100px;
    padding-right: 100px;
  }
  .m-top {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}
@media (max-width: 1440px) {
  .m-top {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .main-padding {
    padding-left: 80px;
    padding-right: 80px;
  }
  .custom-swal-popup .swal2-confirm {
    padding: 6px 25px !important;
  }
  button.swal2-cancel.custom-swal-cancel-button.swal2-styled {
    padding: 6px 25px;
  }
  button.swal2-confirm.swal2-styled {
    padding: 6px 25px;
  }
}
@media (max-width: 1300px) {
  .m-top {
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .main-padding {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media (max-width: 1199px) {
  .m-top {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .main-padding {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (max-width: 991px) {
  .main-padding {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 767px) {
  .my-booking-back-btn a h3 {
    font-size: 16px;
  }
  .my-booking-back-btn a h3 span img {
    width: 14px;
  }
  .main-padding {
    padding-left: 20px;
    padding-right: 20px;
  }
  .sub-head {
    font-size: 16px;
    font-family: "Inter-SemiBold";
  }
}
@media (max-width: 576px) {
  .daterangepicker .drp-buttons {
    text-align: left !important;
  }
  .daterangepicker .drp-buttons .btn {
    margin-left: 0 !important;
  }
  .m-top {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .main-padding {
    padding-left: 10px;
    padding-right: 10px;
  }
  .hotel-filter-price-adjusting .range-slider .rangeValues {
    margin-bottom: 5px;
  }
}