body {
  font-family: "Cairo", sans-serif;
  font-weight: 600; /* Regular weight */
}

.btns-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.filter-btns-container {
  align-self: center;
}

.btns-container button,
.filter-btns-container button {
  background-color: #eceded;
  border-color: #b0b1b1;
}

.btns-container button.active,
.filter-btns-container button.active {
  background-color: #92d2f786;
  border-color: #638fa8;
}

/* Style for the map container */
.map {
  position: relative;
  width: 100%;
}

header {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

footer {
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.nav-btn {
  width: 30%;
}

.home-icon {
  color: black !important;
}

.add-house-btn,
.get-house-btn {
  color: #00b3c8;
  border-color: #00b3c8;
}

.floating-btn {
  line-height: 15px;
  position: absolute;
  bottom: 10%;
  right: 10%;
  background-color: #ffffffa6;
  color: black;
  padding: 10px 15px;
  border-radius: 10px;
  z-index: 1000;
  border: 1px solid #86cbd1;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-size: 15px;
}

.floating-btn i {
  margin-left: 5px;
}

i {
  font-size: x-large !important;
}

.bottom-nav-buttons {
  display: flex;
  flex-direction: row;
  height: 7vh;
  justify-content: space-around;
  font-size: small;
}

.bottom-nav-buttons button.active {
  color: #000000 !important;
}
.bottom-nav-buttons button.active > span {
  color: #000000 !important;
}

.bottom-nav-buttons button.active > svg > g > path,
.bottom-nav-buttons button.active > svg > g > g > path,
.bottom-nav-buttons button.active > svg > path,
.bottom-nav-buttons button.active > svg > g > circle {
  fill: #000000;
}

.modal-img {
  width: 50px;
}

.modal-content {
  border: 1px solid #86cbd1;
}
form {
  display: flex;
  gap: 15px;
  flex-direction: column;
}
form div {
  direction: rtl;
}

.modal-footer button {
  background-color: rgb(0 179 201) !important;
}

.feature-dialog,
.donations-dialog {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background-color: #fff;
  transition: bottom 0.3s;
  padding: 10px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
  max-height: 75%;
}

.feature-dialog.active,
.donations-dialog.active {
  bottom: 0;
}

.dialog-content {
  text-align: center;
}

.feature-select,
.donation-select {
  width: 100%;
  padding: 10px;
}

.feature-dialog,
.donations-dialog {
  z-index: 1001;
  border-radius: 25px 25px 0px 0px;
}

#dialog-title,
#donations-dialog-title {
  text-align: right;
  margin: 10px;
}

.dialog-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.flex-col {
  display: flex;
  flex-direction: column;
  /* border: 1px solid #00b3c8; */
  /* border-radius: 5px; */
  /* padding: 12px; */
  /* box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); */
  width: 100%;
}

/* .flex-col:last-child {
  margin-bottom: 100px;
} */

.flex-row {
  display: flex;
  flex-direction: row-reverse !important;
}

.element-title {
  font-weight: bold;
  font-size: 20px;
}

.furnitured-badge {
  margin-right: 5px;
  padding: 5px;
  background-color: aliceblue;
  font-size: 14px;
}

#feature-dialog-content,
#donations-dialog-content {
  max-height: 570px;
  overflow: scroll;
  scrollbar-width: thin;
}

#feature-dialog-content {
  padding-bottom: 60%;
  gap: 20px;
}

.rental-price-element {
  margin-right: auto;
}

.fa-map-marker {
  margin-left: 7px;
}

.call-action-btn,
.whatsapp-action-btn,
.share-action-btn,
.instagram-action-btn,
.delete-ad-btn,
.edit-ad-btn,
.approve-ad-btn,
.reject-ad-btn,
.unpublish-ad-btn,
.publish-ad-btn,
.delete-sector-btn,
.edit-sector-btn,
.approve-sector-btn,
.reject-sector-btn,
.unpublish-sector-btn,
.publish-sector-btn {
  border: 1px solid #00b3c8;
  border-radius: 4px;
  margin-top: 13px;
  z-index: 1000;
}

.approve-ad-btn {
  background-color: #00b3c8;
  color: white;
  margin-left: 7px;
}

.more-details-link {
  font-size: 14px;
  position: relative;
  top: 10px;
  left: 10px;
  text-decoration: none;
}

.whatsapp-action-btn {
  background-color: #00b3c8;
  color: white;
  margin-left: 7px;
}

.share-action-btn {
  margin-left: 7px;
}

#social-media-div button {
  margin-top: 0px;
}

.instagram-action-btn {
  color: #00b3c8;
  margin-left: 7px;
  margin-top: 0px;
}

.call-action-btn,
.share-action-btn,
.delete-ad-btn,
.edit-ad-btn,
.reject-ad-btn,
.unpublish-ad-btn,
.publish-ad-btn,
.delete-sector-btn,
.edit-sector-btn,
.reject-sector-btn,
.approve-sector-btn,
.unpublish-sector-btn,
.publish-sector-btn {
  color: #429ccd;
}

.nb-of-rooms-element,
.area-element {
  background-color: aliceblue;
  margin-bottom: 11px;
  margin-top: 10px;
  font-size: 13px;
  padding: 5px;
}

#donations-dialog-content > .flex-row {
  display: flex;
  border: 1px solid #00b3c8;
  border-radius: 5px;
  padding: 12px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  margin-bottom: 12px;
  align-items: center;
}

#donations-dialog-content > .flex-row > .flex-col {
  border: none;
  box-shadow: none;
}

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

.circular-div img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#sector-name {
  font-weight: bold;
  font-size: medium;
}

#sector-address,
#sector-type {
  font-size: 10px;
}

#donations-dialog-content .flex-col {
  align-items: end;
  margin-bottom: 0px;
  padding: 0px 12px 0px 0px;
}

#social-media-div {
  margin-right: auto;
}

#donations-dialog-content > .flex-row:last-child {
  margin-bottom: 100px;
}

#sign-up-container {
  direction: rtl;
}

#profile-name {
  font-size: calc(1em - 2px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-gallery {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.image-gallery div {
  width: 90px;
  height: 90px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.image-gallery .more {
  background-color: #e0e0e0;
  font-size: 18px;
  font-weight: bold;
  color: #666;
}

.description {
  direction: rtl;
}

.description h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

#description {
  overflow-y: scroll;
  max-height: 200px;
  scrollbar-width: thin;
}

.houses-btn,
.associations-btn,
.centers-btn,
.for-sale-btn {
  background-color: #eceded;
  border-color: #b0b1b1;
}

.houses-btn.active,
.associations-btn.active,
.centers-btn.active,
.for-sale-btn.active {
  background-color: #92d2f786;
  border-color: #638fa8;
}

#single-house-btn {
  margin-right: 8px;
}

.header-social-icons > a > i {
  font-size: xx-large !important;
}

.about-us-btn {
  background-color: #00b3c8;
  color: white;
}

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  z-index: 1000;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#mySidebar > button#profile-btn {
  position: absolute;
  top: 18px;
  left: 10px;
}

.select2 .select2-selection.select2-selection--single {
  border-color: #e5e8eb;
  height: 37px;
  border-radius: 0.375rem;
  appearance: none;
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 10px 10px;
  padding-right: 10px;
  background-color: rgb(248, 248, 248);
  direction: rtl;
}

.select2 .select2-selection__rendered {
  font-weight: normal;
}

.photo-gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.photo-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
.photo-container img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  position: absolute;
  top: 0;
  left: 100%;
  transition: left 0.3s ease-in-out;
}
.photo-container img.active {
  left: 0;
}
.nav-btn {
  background-color: #00b3c8;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
  width: 15%;
  transition: background-color 0.3s ease-in-out;
}

.photo-preview-container img.main-photo {
  border: 4px solid #00b3c8;
  border-radius: 10px;
}

.spinner-border {
  color: #00b3c8;
}

.map-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}