.ion-page {
  --ion-background-color: linear-gradient(#fadcc6, #f2efee);
  padding-top: env(safe-area-inset-top); /* dynamic top padding */
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

* {
  font-family: "Outfit", sans-serif !important;
}

#patient,
#enquiry,
#room-booking,
#booking-list {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.avatar {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
}

img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
}

.color-black {
  color: #000;
}

.color-grey {
  color: #a1a8af;
}

.parent-id {
  height: 100vh;
  overflow-y: auto;
  scrollbar-color: #fff #fff;
}

.icon-menu {
  justify-content: start;
}

.form-control {
  height: 47px;
  border: 2px solid #d3d3d3 !important;
  border-radius: 8px;
  font-weight: 400;
  font-size: 15px;
  color: #252525;
  padding-left: 20px;
  box-shadow: none !important;
}

.patient-count {
  font-weight: 1000;
  font-size: 45px;
  color: #252525;
}

.form-control:hover {
  border: 1px solid #fff !important;
}

.form-control:focus {
  border: 1px solid #fff !important;
}

.form-control::placeholder {
  color: rgba(37, 37, 37, 0.5);
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  padding-left: 3px;
}

.categories,
.patient-summary {
  background-color: #fff;
  border-radius: 16px;
  height: auto;
  margin: 10px auto;
  padding-bottom: 1rem;
}

.patient-summary {
  background-color: #fcde35;
}

.input-search {
  width: 84% !important;
}

.input-image {
  width: 14% !important;
}

.items-patient,
.items-enquiry,
.items-roomavail,
.items-roombook,
.items-roomstatus,
.items-maintenance,
.items-bookinglist,
.items-allrooms {
  height: 50px;
  width: 50px;
  border-radius: 12px;
  background-color: #ffe7e7;
}

.items-enquiry {
  background-color: #e7edff;
}

.items-roomavail {
  background-color: #eee6ff;
}

.items-roombook {
  background-color: #fff5db;
}

.items-roomstatus {
  background-color: #fde8ff;
}

.items-bookinglist {
  background-color: #fff1f0;
}

.items-allrooms {
  background-color: #e8fff1;
}

.items-maintenance {
  background-color: #ffe8f4;
}

.patient-details {
  background-color: #fff2d2;
  border-radius: 12px;
  height: 60px;
}

.rooms-details {
  background-color: #f7f8fd;
  border-radius: 12px;
}

.categories .pointer {
  cursor: pointer;
}

.login-fields {
  width: 100%;
  max-width: 450px;
}

.footer {
  position: fixed;
  background-color: #fff;
  width: 100%;
  height: 55px;
  bottom: 0;
}

.circle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  margin-top: -48px;
  border: 5px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background-color: #fcde35;
}

.circle-container span {
  color: #000;
  font-size: 25px;
}

.boxes,
.active-boxes {
  width: 100%;
  height: 112px;
  border: 1px solid #000;
  border-radius: 12px;
}

.active-boxes {
  border: 1px solid #08ac73;
}

.custom-box,
.custom-option,
.active-option {
  background-color: #f2f2f3;
  border-radius: 5px;
  width: 92%;
  position: absolute;
  bottom: 10px;
}

.custom-option,
.active-option {
  position: relative;
  padding: 5px;
  width: auto;
}

.active-option {
  background-color: #212121;
  color: #fff !important;
}

.active-option p {
  color: #fff;
}

.cancel-button,
.update-button,
.active-update-button,
.cancel-room-button {
  width: 165px;
  height: 48px;
  border-radius: 24px;
  background-color: #fff;
  border: 1px solid #212121;
  cursor: pointer;
  color: #000 !important;
}

input[type="time"] {
  position: relative;
}

input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
  position: absolute;
  right: 5px;
  color: #a1a8af !important;
}

.ReactCrop__child-wrapper {
  width: auto;
  height: auto;
  /* display: flex;
  justify-content: center;
  align-items: center; */
}

input[type="time"]::after {
  content: "\f017";
  font-family: "Font Awesome 5 Free";
  font-weight: 500;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #a1a8af !important;
}

.css-1nmdiq5-menu {
  z-index: 10000 !important;
  color: #000 !important;
  background-color: #fff !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.search-box {
  background-color: #fff !important;
  color: #000 !important;
}

.country-list {
  min-height: 250px !important;
  max-height: 250px !important;
  z-index: 10 !important;
}

.react-tel-input .selected-flag:before {
  box-shadow: none !important;
}

.offline-overlay {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;

  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.offline-message {
  background: #f2f2f3;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.offline-message img {
  width: 120px;
  margin-bottom: 20px;
  border-radius: 8px;
}

.offline-message h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.offline-message p {
  font-size: 16px;
  color: #666;
}

.disabled-button {
  width: 90px;
  height: 35px;
  border-radius: 24px;
  background-color: #a1a8af;
  cursor: pointer;
  color: #fff !important;
}

.select-button {
  width: 90px;
  height: 35px;
  border-radius: 24px;
  background-color: #fff;
  cursor: pointer;
  color: #000 !important;
  border: 1px solid #08ac73;
}

.active-select-button {
  width: 90px;
  height: 35px;
  border-radius: 24px;
  background-color: #08ac73;
  cursor: pointer;
  color: #fff !important;
}

.update-button {
  background-color: #f2f2f3;
  border: none;
}

.cancel-room-button {
  background-color: #ff3333;
  color: #fff !important;
  border: none;
}

.active-update-button {
  background-color: #fcde35;
  border: none;
}

.form-control {
  height: 47px;
  border: 2px solid #d3d3d3 !important;
  border-radius: 8px;
  font-weight: 400;
  font-size: 15px;
  padding-left: 20px;
  color: #252525;
  box-shadow: none !important;
}

.label-custom {
  position: absolute;
  pointer-events: none;
  left: 25px;
  top: -10px;
  background-color: #fff;
  padding: 0 5px 0 5px;
  /* color: rgba(37, 37, 37, 0.5); */
  z-index: 1;
  height: 20px;
  font-size: 12px !important;
  color: rgba(0, 0, 0, 0.6);
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  /* line-height: 1.4375em; */
  letter-spacing: 0.00938em;
}

.form-control:focus {
  border: 2px solid #d3d3d3 !important;
}

.form-control:hover {
  border: 2px solid #d3d3d3 !important;
}

.category-list {
  height: 430px;
  width: 100%;
  border-radius: 20px 20px 0 0;
  background-color: #fff;
  box-shadow: 0px 0px 20px #00000029;
  position: fixed;
  bottom: 0;
  z-index: 1000;
}

.react-datepicker,
.react-datepicker-wrapper {
  width: 100% !important;
}

.react-datepicker-popper {
  z-index: 10 !important;
}

.react-datepicker__month-container {
  width: 100% !important;
}

.react-datepicker__header {
  background-color: #fff !important;
  border-bottom: none !important;
}

.react-datepicker__day--in-range,
.react-datepicker__day--keyboard-selected {
  background-color: #fcde35 !important;
  color: #000 !important;
}

/* input[type="checkbox"] {
    accent-color: #ffcc00 !important;
} */

p,
span {
  color: #000;
}

.custom-checkbox-g,
.custom-checkbox-y,
.custom-checkbox-gr,
.custom-checkbox-o {
  appearance: none;
  width: 15px;
  height: 15px;
  background-color: white;
  border: 2px solid #08ac73;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}

.custom-checkbox-y {
  border: 2px solid #ffcf33;
}

.custom-checkbox-y:checked {
  background-color: #ffcf33;
  border: 2px solid #ffcf33;
}

.custom-checkbox-o {
  border: 2px solid #fe8833;
}

.custom-checkbox-o:checked {
  background-color: #fe8833;
  border: 2px solid #fe8833;
}

.custom-checkbox-gr {
  border: 2px solid #a1a8af;
}

.custom-checkbox-gr:checked {
  background-color: #a1a8af;
  border: 2px solid #a1a8af;
}

.custom-checkbox-g:checked {
  background-color: #08ac73;
  border: 2px solid #08ac73;
}

.custom-checkbox-g:checked::after,
.custom-checkbox-y:checked::after,
.custom-checkbox-gr:checked::after,
.custom-checkbox-o:checked::after {
  content: "✔";
  position: absolute;
  top: -1px;
  left: 2px;
  font-size: 10px;
  color: white;
  font-weight: bold;
}

.room-gbox,
.room-abox,
.room-obox,
.room-ybox {
  background-color: #f1fff8;
  border: 1px solid #08ac73;
  border-radius: 10px;
  margin: 10px;
  height: 100px;
}

.room-abox {
  background-color: #f2f2f3;
  border: 1px solid #f2f2f3;
}

.room-obox {
  background-color: #fff5ee;
  border: 1px solid #fe8833;
}

.css-13cymwt-control,
.css-t3ipsp-control {
  height: 47px !important;
  border: 2px solid #d3d3d3 !important;
  box-shadow: 0 0 0 0 #d3d3d3 !important;
}

.css-1jqq78o-placeholder {
  font-size: 14px !important;
}

.room-ybox {
  background-color: #fffcf2;
  border: 1px solid #ffcf33;
}

.white-box {
  background-color: #ffffff;
  border-radius: 8px;
  min-width: 70px;
  height: 70px;
  padding: 5px;
}

/* Preloader Component Styles */
.preloader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  width: 100%;
}

.preloader-animation {
  width: 60px;
  height: 60px;
  margin-bottom: 16px;
}

.loading-content {
  font-size: 14px;
  color: #666;
  font-weight: 400 !important;
  margin: 0;
}

@media screen and (max-width: 480px) {
  .icon-menu {
    justify-content: space-between;
  }

  .login-fields {
    max-width: 100%;
  }

  /* .diag-entry {
    display: flex !important;
    flex-direction: column !important;
  } */
}

@media (max-width: 576px) {
  .status-height {
    height: 100% !important;
  }

  .status-col {
    align-items: center !important;
    justify-content: start !important;
  }
}

@media (min-width: 576px) {
  .status-height {
    height: 25% !important;
  }

  .status-col {
    align-items: start !important;
    justify-content: end !important;
  }
}

/* Patient relation name link styles */
.patient-relation-link {
  color: #000 !important;
  text-decoration: underline !important;
  cursor: pointer;
  transition: color 0.3s ease;
}

.patient-relation-link:hover {
  color: #fadcc6 !important;
  text-decoration: underline !important;
}
.room-abox-disabled {
  background-color: #f5f5f5;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  opacity: 0.6;
  /* margin: 10px 10px; */
}