* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.klar-sdr{
  padding: 10px;
  
}

.date-input-sdr,
.rooms-input-sdr,
button#dropdown-toggle-sdr{
  color: #842f2f !important; 
}

.rooms-input-wrapper-sdr svg.icon-sdr {
 position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
	z-index: 1 !important; 
    pointer-events: none; /* Hace que el SVG no interfiera con el input */
}

.date-input-wrapper-sdr svg.icon-sdr {
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
	z-index: 1 !important;
    pointer-events: none; /* Hace que el SVG no interfiera con el input */
}
.dropdown-wrapper-sdr button {
  color: #000 !important;
  }

.dropdown-wrapper-sdr {
  width: 100%; /* Ensure the wrapper takes up the full width of the container */
  height: 48px;
  max-width: 900px; /* You can adjust this max-width to your design */
  display: flex;
  justify-content: center;
  margin: 0 auto; /* Center the dropdown button */
}

.body-sdr {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f4f4 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100vh !important;
}

.search-container-sdr {
  background-color: white !important;
  padding: 20px !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  width: 100% !important;
  max-width: 800px !important;
}

.search-form-sdr {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
}

.input-group-sdr {
  position: relative !important;
  text-align: center !important;
  flex-grow: 0.3 !important;
}
.dropdown-toggle-sdr {
  width: 100%; /* Ensure the button takes up the full width of the container */
  padding: 12px 20px; /* Padding around the text and icon */
  font-size: 16px; /* Adjust the font size */
  font-weight: bold;
  border: 2px solid #ccc; /* Border around the button */
  border-radius: 50px;
  background-color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Ensure the icon and text are spaced properly */
  white-space: nowrap; /* Prevent text from wrapping */
  overflow: hidden; /* Ensure any overflow is hidden */
  text-overflow: ellipsis; /* Add ellipsis if text overflows */
 // box-sizing: border-box; /* Include padding in the element's width and height */
}

/* Adjust the icon inside the button */
.dropdown-toggle-sdr img {
  font-size: 20px;
  margin-left: 10px; /* Space between text and icon */
}

.date-input-sdr,
.rooms-input-sdr,
.dropdown-toggle-sdr,
.code-tag-sdr{
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 18px !important;
  border: 2px solid #98272d  !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  text-align: center !important;
  font-weight: bold !important;
}

.rooms-input-sdr {
  cursor: pointer !important;
  padding-left: 42px !important;
  padding-right: 24px !important;
  margin-bottom: 0px !important;
}

.rooms-input-wrapper-sdr {
  position: relative !important;
  display: inline-block !important;
}

.rooms-input-wrapper-sdr img {
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 18px !important;
  color: #333 !important;
}

.date-input-sdr {
  cursor: pointer !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  margin-bottom: 0px !important;
  text-align: center !important;
}

.date-input-wrapper-sdr {
  position: relative !important;
  display: inline-block !important;
}

.date-input-wrapper-sdr img {
  z-index: 1 !important;
  position: absolute !important;
  left: 15px !important;
  top: 48% !important;
  transform: translateY(-50%) !important;
  font-size: 18px !important;
  color: #333 !important;
}

.dropdown-menu-sdr {
  display: none !important;
  position: absolute !important;
  top: 60px !important;
  left: 0 !important;
  width: 100% !important;
  background-color: white !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
  padding: 20px !important;
  border-radius: 8px !important;
  z-index: 10 !important;
  overflow: hidden !important;
}

.dropdown-menu-sdr.active {
  display: block !important;
}

.room-item-sdr {
  margin-bottom: 0px !important;
  padding-bottom: 10px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  border-bottom: 1px solid #ddd !important;
}

.counter-sdr {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  border: none !important;
  margin-top: 10px !important;
}

.counter-sdr span {
  font-weight: bold !important;
  font-size: 18px !important;
}

.counter-sdr button {
  padding: 8px 14px !important;
  font-size: 18px !important;
  border: 1px solid #000000 !important;
  border-radius: 5px !important;
  background-color: white !important;
  color: #000000 !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
  cursor: pointer !important;
}

.counter-sdr input {
  width: 50px !important;
  font-size: 18px !important;
  text-align: center !important;
  border: none !important;
  background: none !important;
}

.counter-group-sdr {
  display: flex !important;
  align-items: center !important;
  border: 2px solid #000000 !important;
  border-radius: 50px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.counter-group-sdr button {
  background-color: white !important;
  border: none !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  font-size: 16px !important;
}

.counter-group-sdr button:hover {
  color: #ddd !important;
}

.counter-group-sdr button:first-of-type {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}

.counter-group-sdr button:last-of-type {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: none !important;
}

.counter-group-sdr input {
  width: 40px !important;
  text-align: center !important;
  border: none !important;
  font-size: 16px !important;
  background: none !important;
  pointer-events: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.add-room-sdr {
  background: none !important;
  border: none !important;
  color: #007bff !important;
  font-size: 16px !important;
  cursor: pointer !important;
  margin-top: 10px !important;
  display: inline-block !Important;
  width: 100% !Important;
}

.add-room-sdr:hover {
  color: #000000 !important;
  text-decoration: underline !important;
}

.reservation-room-sdr {
  background: none !important;
  border: none !important;
  color: #007bff !important;
  font-size: 16px !important;
  cursor: pointer !important;
  margin-top: 10px !important;
}

.reservation-room-sdr:hover {
  color: #000000 !important;
  text-decoration: underline !important;
}

.remove-room-sdr {
  background: none !important;
  border: none !important;
  color: #007bff !important;
  font-size: 16px !important;
  cursor: pointer !important;
  margin-top: 10px !important;
  width: 100% !Important;
  
  
}

.remove-room-sdr:hover {
  color: #000000 !important;
  text-decoration: underline !important;
}

.child-age-sdr {
  background-color: white !important;
  border: 1.5px solid #ccc !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 16px !important;
  color: #333 !important;
  width: 100% !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
  cursor: pointer !important;
  transition: border-color 0.3s ease !important;
  position: relative !important;
}

.child-age-sdr:hover {
  border-color: #000 !important;
}

.child-age-sdr:focus {
  border-color: #000000 !important;
  outline: none !important;
}

.child-age-sdr option {
  font-size: 16px !important;
  padding: 8px !important;
}

.children-ages-sdr {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.accept-btn-sdr {
  background-color: #98272d !important;
  color: white !important;
  padding: 12px 20px !important;
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  padding-right: 20px !important;
  text-align: center;
}

.search-btn-sdr {
  background-color: #98272d !important;
  color: white !important;
  padding: 12px 20px !important;
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  padding-right: 20px !important;
}

.search-btn-sdr:hover,
.accept-btn-sdr:hover {
  background-color: #000000 !important;
}

.search-btn-sdr:focus,
.accept-btn-sdr:focus,
.rooms-input-sdr:focus,
.date-input-sdr:focus {
  outline: none !important;
  border-color: #000000 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background-color: #000000 !important;
  color: white !important;
  border-color: #000000 !important;
  border: none !important; 
  box-shadow: none !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  color: #000000 !important;
  border-color: #000000 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-month {
  background-color: #000000 !important;
  color: white !important;
  border-color: #000000 !important;
}

.flatpickr-input:focus {
  border-color: #000000 !important;
}

.error-message-sdr {
  color: red !important;
  font-size: 12px !important;
  margin-top: 4px !important;
}

.error-border-sdr {
  border: 1px solid red !important;
}

.rooms-container-pd-sdr {
  padding: 16px !important;
}


.sp-sdr {
  margin-right: 10px !important;
}

button:focus {
  outline: none !important;
  box-shadow: none !important;
}

button:active {
  outline: none !important;
  box-shadow: none !important;
}


.dropdown-toggle-sdr {
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  background-color: white !important;
}


.dropdown-content-sdr {
  display: none !important;
  position: absolute !important;
  background-color: white !important;
  min-width: 250px !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
  padding: 20px !important;
  z-index: 1 !important;
  top: 50px !important;
  left: 0 !important;
  border-radius: 10px !important;
  border: 1px solid #ddd !important;
}

.dropdown-content-sdr.show {
  display: block !important; 
}


.booking-code-sdr input {
  padding: 10px !important;
  border-radius: 8px !important;
  border: 2px solid #000000 !important;
  font-size: 16px !important;
  margin-top: 5px !important;
  width: 100% !important;
  border-color: black;
}


.add-code-sdr {
  background-color: #98272d !important;
  color: white !important;
  padding: 10px 20px !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: background-color 0.3s !important;
  margin-top: 10px !important;
  display: block !important;
  width: 100% !important;
}

.add-code-sdr:hover {
  background-color: #333 !important;
}


.code-content-sdr {
  display: inline-flex !important;
  align-items: center !important;
  background-color: white !important;
}

.code-content-sdr span {
  margin-right: 10px !important;
}

.code-content-sdr button {
  border: none !important;
  cursor: pointer !important;
}

#booking-code-input:focus{
  outline: none; /* Esto elimina el contorno por defecto */
  border-color: black; /* Esto cambia el borde a color negro */
  box-shadow: 0 0 0 1px black; /* Si deseas un efecto similar al borde azul que aparece por defecto, pero en negro */
}

@media only screen and (max-width: 730px){
  .body-sdr {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f4 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100vh !important;
  }
  .klar-sdr{
    padding: 10px;
    
  }
  .search-form-sdr {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 20px !important;
  }  
  .counter-sdr input {
    width: 10px !important;
    font-size: 18px !important;
    text-align: center !important;
    border: none !important;
    background: none !important;
  }

  .rooms-input-wrapper-sdr,
  .flatpickr-wrapper,
  .date-input-wrapper-sdr{
    width: 100%
  }

.search-container-sdr {
  background-color: white !important;
  padding: 20px !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  width: 100% !important;
  max-width: 600px !important;
}

.dropdown-toggle-sdr {
  text-align: center !important;
  font-weight: bold !important;
  align-items: center !important;
  justify-content: center !important;
}



.dropdown-toggle-sdr
{
  width: 100% !important;
  font-size: 18px !important;
  border: 2px solid #ccc !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  text-align: center !important;
  font-weight: bold !important;
  white-space: nowrap;
}

.rooms-input-wrapper-sdr img,
  .date-input-wrapper-sdr img {
    font-size: 14px !important;
  }

  

}

@media only screen and (max-width: 600px){
  .body-sdr {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f4 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100vh !important;
  }
  .search-form-sdr {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 20px !important;
  }
  .dropdown-wrapper-sdr {
    width: 100%; /* Ensure the wrapper takes up the full width of the container */
    max-width: 600px; /* You can adjust this max-width to your design */
    display: flex;
    justify-content: center;
    margin: 0 auto; /* Center the dropdown button */
	z-index: 2; /* Ajusta según la necesidad */

  }  
.date-input-sdr,
.rooms-input-sdr,
.dropdown-toggle-sdr,
.code-tag-sdr{
  width: 100% !important;
  font-size: 18px !important;
  border: 2px solid #98272d  !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  text-align: center !important;
  font-weight: bold !important;
}

.search-container-sdr {
  background-color: white !important;
  padding: 20px !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  width: 100% !important;
  max-width: 400px !important;
}

.dropdown-toggle-sdr {
  text-align: center !important;
  font-weight: bold !important;
  align-items: center !important;
  justify-content: center !important;
}

.dropdown-toggle-sdr {
  width: 100% !important;
}

.rooms-input-wrapper-sdr img,
  .date-input-wrapper-sdr img {
    font-size: 14px !important;
  }

  .rooms-input-sdr,
  .date-input-sdr {
    padding-left: 30px !important;
  }
  
.accept-btn-sdr {
  background-color: #98272d !important;
  color: white !important;
  padding: 12px 20px !important;
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  padding-right: 20px !important;
  max-width: 100%;
  text-align: center;
}

.klar-sdr{
  padding-left: 70px;
  padding: 10px;
}
}