body.lightMode {
  background-color: var(--white-color);
}

body.darkMode {
  background-color: var(--darkmode-primary-color);
  color: var(--darkmode-text-color) !important;
}

body.skyhyMode {
  background-color: #61ccf6;
  color: #003366 !important;
}

.darkMode .newProfileContainer {
  background-color: var(--background-primary-bg, #171d37) !important;
}

.skyhyMode .newProfileContainer {
  background-color: #61ccf6 !important;
}

.skyhyMode ::selection {
  background: rgba(14, 165, 233, 0.35);
  color: #0f172a;
}

.skyhyMode .textWhite {
  color: #ffffff !important;
}

.skyhyMode .feedbackRow .textWhite,
.skyhyMode .feedbackRow label.textWhite {
  color: #003366 !important;
}

.skyhyMode .bgBlackTwo.feedbackRow {
  background: #ffffff !important;
}

.skyhyMode .bgBlack {
  background-color: #61ccf6 !important;
}

/* Exception: Booking card should be white in SkyHy mode */
.skyhyMode .bookItContentBox.bgBlack,
.skyhyMode .bookItContentCommon .bgBlack {
  background-color: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.18) !important;
}

/* Exception: Hostel view Check Availability card - white background in SkyHy mode */
.skyhyMode [class*='panelDefault'].bgBlack {
  background-color: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.18) !important;
}

.skyhyMode [class*='panelDefault'].bgBlack h2,
.skyhyMode [class*='panelDefault'].bgBlack label,
.skyhyMode [class*='panelDefault'].bgBlack div,
.skyhyMode [class*='panelDefault'].bgBlack span,
.skyhyMode [class*='panelDefault'].bgBlack p {
  color: #111827 !important;
}

.skyhyMode [class*='panelDefault'].bgBlack input,
.skyhyMode [class*='panelDefault'].bgBlack select {
  color: #111827 !important;
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* Primary buttons (Get Availability, Book) keep blue - don't override */

/* Text inside booking card should be dark */
.skyhyMode .bookItContentBox.bgBlack .textWhite,
.skyhyMode .bookItContentCommon .bgBlack .textWhite {
  color: #0284c7 !important;
}

/* Removed SVG icon inversion for skyhy mode - keep light mode icons */
/* .skyhyMode svg use {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
} */

.skyhyMode .commonHeader.navbar-default {
  background-color: #61ccf6 !important;
}

/* Make commonHeader transparent when used in HomeHeader (home and marketplace pages) */
.skyhyMode .homeHeaderRoot {
  background-color: transparent !important;
}

.skyhyMode .homeHeaderRoot > .bgBlack {
  background-color: transparent !important;
}

.skyhyMode .homeHeaderRoot > .bgBlack > .commonHeader.navbar-default,
.skyhyMode .homeHeader.navbar-default {
  background-color: transparent !important;
}

.skyhyMode .commonHeader .dropdown-menu {
  background-color: #61ccf6;
}

.skyhyMode .commonHeader .dropdown-menu > li > a {
  color: #003366;
}

.skyhyMode .commonHeader .dropdown-menu > li > form > button {
  color: #003366;
}

.skyhyMode .darkModeInnerMenu.navbar-default {
  background-color: #61ccf6 !important;
}

.skyhyMode .whyHostHeader.navbar-default {
  background-color: transparent !important;
}

.skyhyMode .DateInput_input {
  color: #000000 !important;
  background-color: #ffffff !important;
}

.skyhyMode .form-control {
  color: #000000 !important;
  background-color: #ffffff !important;
}

.skyhyMode input[type='text'],
.skyhyMode input[type='email'],
.skyhyMode input[type='password'],
.skyhyMode input[type='number'],
.skyhyMode input[type='tel'],
.skyhyMode input[type='url'],
.skyhyMode input[type='search'],
.skyhyMode input[type='date'],
.skyhyMode input[type='time'],
.skyhyMode input[type='datetime-local'],
.skyhyMode textarea,
.skyhyMode select {
  color: #000000 !important;
  background-color: #ffffff !important;
}

.skyhyMode input[type='text']::placeholder,
.skyhyMode input[type='email']::placeholder,
.skyhyMode input[type='password']::placeholder,
.skyhyMode input[type='number']::placeholder,
.skyhyMode input[type='tel']::placeholder,
.skyhyMode input[type='url']::placeholder,
.skyhyMode input[type='search']::placeholder,
.skyhyMode textarea::placeholder {
  color: #000000 !important;
}

.skyhyMode select option {
  color: #000000 !important;
  background-color: #ffffff !important;
}

.skyhyMode .commonControlInput,
.skyhyMode .commonPasswordControlInput,
.skyhyMode .commonControlSelect {
  color: #000000 !important;
  background-color: #ffffff !important;
}

.skyhyMode .commonControlInput::placeholder,
.skyhyMode .commonPasswordControlInput::placeholder {
  color: #000000 !important;
}

.skyhyMode .textWhite a {
  color: #ffffff !important;
}

.skyhyMode .modal-content {
  background-color: #ffffff;
  border-radius: 15px !important;
  overflow: hidden;
}

.skyhyMode .bgBlackHover:hover,
.skyhyMode .bgBlackHover:focus,
.skyhyMode .bgBlackHover:active {
  background-color: #61ccf6 !important;
}

.skyhyMode .rc-pagination-item {
  background-color: #61ccf6;
}

.skyhyMode .rc-pagination-item a {
  color: #ffffff;
}

.skyhyMode .modal-header {
  background-color: #ffffff;
  color: var(--common-text-color);
  border-bottom: 1px solid var(--border-color);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.skyhyMode .modal-header .close {
  color: var(--common-text-color);
}

.skyhyMode .modal-body {
  background-color: #ffffff;
  color: var(--common-text-color);
}

.skyhyMode .searchMapSection .gm-bundled-control div:nth-child(1) {
  background: #61ccf6 !important;
}

.skyhyMode .gm-control-active img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.skyhyMode .menuModal .nav-tabs > li.active > a,
.skyhyMode .menuModal .nav-tabs > li.active > a:focus,
.skyhyMode .menuModal .nav-tabs > li.active > a:hover {
  color: var(--common-text-color);
}

.skyhyMode .logInModalContainer,
.skyhyMode .logInModalContainer .modal-content,
.skyhyMode .feedbackModal,
.skyhyMode .feedbackModal .modal-content {
  background-color: #ffffff !important;
  border-radius: 15px !important;
  overflow: hidden;
}

.skyhyMode .logInModalBody,
.skyhyMode .feedbackModal .modal-body {
  background-color: #ffffff !important;
  color: var(--common-text-color) !important;
}

.skyhyMode .modal-dialog .modal-content,
.skyhyMode .loginModal .modal-content,
.skyhyMode .modal-content {
  border-radius: 15px !important;
  overflow: hidden;
}

.skyhyMode .loginModal input.form-control,
.skyhyMode .loginModal select.form-control,
.skyhyMode .loginModal .commonControlInput,
.skyhyMode .loginModal .commonPasswordControlInput {
  background-color: #ffffff !important;
  color: #000000 !important;
}

.skyhyMode .loginModal input.form-control::placeholder,
.skyhyMode .loginModal .commonControlInput::placeholder,
.skyhyMode .loginModal .commonPasswordControlInput::placeholder {
  color: #000000 !important;
}

.skyhyMode .loginModal select.form-control,
.skyhyMode .loginModal select {
  color: #000000 !important;
}

.skyhyMode .loginModal select.form-control option,
.skyhyMode .loginModal select option {
  color: #000000 !important;
}

.skyhyMode .loginModal label.textWhite,
.skyhyMode .loginModal .textWhite {
  color: #000000 !important;
}

.skyhyMode .payoutStepBg label.textWhite,
.skyhyMode .payoutStepBg .textWhite,
.skyhyMode .payoutStepBg label,
.skyhyMode .commonListingBg.payoutStepBg label.textWhite,
.skyhyMode .commonListingBg.payoutStepBg .textWhite,
.skyhyMode .inputFocusColor.commonListingBg label.textWhite,
.skyhyMode .inputFocusColor.commonListingBg .textWhite,
.skyhyMode .payoutMethodList label.textWhite,
.skyhyMode .payoutMethodList .textWhite {
  color: #003366 !important;
}

.skyhyMode .modal-footer {
  background-color: #ffffff;
  border-top: 1px solid var(--border-color);
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

/* Removed SVG image inversion for skyhy mode - keep light mode icons */
/* .skyhyMode .svgImg img {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
} */

.skyhyMode .calendarContainerDark {
  margin-left: 0;
}

.skyhyMode .bgTransparent,
.skyhyMode .bgTransparent:hover,
.skyhyMode .bgTransparent:focus {
  background: transparent !important;
}

.skyhyMode .DateInput {
  background: transparent;
}

.skyhyMode .DateRangePickerInput {
  background-color: transparent;
}

.skyhyMode .DayPicker__horizontal {
  background: #ffffff;
  border-radius: 0;
}

.skyhyMode .CalendarMonth {
  background: #ffffff;
}

.skyhyMode .CalendarMonth_caption {
  color: #003366;
}

.skyhyMode .DayPicker_weekHeader {
  color: #003366;
}

.skyhyMode .CalendarMonthGrid {
  background: #ffffff;
}

.skyhyMode .DateInput_fangShape {
  fill: #61ccf6;
}

.skyhyMode .borderDark {
  border-color: #ffffff;
}

.skyhyMode .menuActive .sideNav,
.skyhyMode .sideNav:focus {
  color: #ffffff;
  background: transparent;
}

.skyhyMode .sideNav {
  color: #ffffff;
}

.skyhyMode .iconBtnDark,
.skyhyMode .iconBtnDark:focus,
.skyhyMode .iconBtnDark:hover,
.skyhyMode .iconBtnDark:active {
  color: #ffffff;
  background: transparent !important;
}

.skyhyMode .ListHeader.navbar-default .navbar-nav > li > a {
  background: transparent;
  color: #ffffff;
}

.skyhyMode .BecomeCalendar .DayPicker-Caption {
  color: #ffffff;
}

.skyhyMode .DayPicker-NavButton--prev {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.skyhyMode .DayPicker-NavButton--next {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.skyhyMode .DayPicker-Day {
  background-color: #ffffff;
}

.skyhyMode .DayPicker {
  background-color: #ffffff !important;
}

.skyhyMode .CalendarDay__default {
  background-color: #ffffff !important;
  color: #484848 !important;
  border-color: #e4e7e7 !important;
}

.skyhyMode .CalendarDay__default:hover {
  background-color: #f2f2f2 !important;
  border-color: #d4d4d4 !important;
  color: #484848 !important;
}

.skyhyMode .CalendarDay--selected-start,
.skyhyMode .CalendarDay--selected-end,
.skyhyMode .CalendarDay__selected_start,
.skyhyMode .CalendarDay__selected_end {
  background-color: #007cba !important;
  border-color: #007cba !important;
  color: #ffffff !important;
  font-weight: bold !important;
  box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.3) !important;
}

.skyhyMode .CalendarDay--selected-start:hover,
.skyhyMode .CalendarDay--selected-end:hover,
.skyhyMode .CalendarDay__selected_start:hover,
.skyhyMode .CalendarDay__selected_end:hover {
  background-color: #005a8b !important;
  border-color: #005a8b !important;
  color: #ffffff !important;
}

.skyhyMode .CalendarDay--in-range,
.skyhyMode .CalendarDay__in_range {
  background-color: #e0f0f7 !important;
  border-color: #b2d4e8 !important;
  color: #007cba !important;
  font-weight: normal !important;
}

.skyhyMode .CalendarDay--in-range:hover,
.skyhyMode .CalendarDay__in_range:hover {
  background-color: #c8e4f0 !important;
  border-color: #99c8dd !important;
  color: #005a8b !important;
}

.skyhyMode .CalendarDay--selected-span,
.skyhyMode .CalendarDay__selected_span {
  background-color: #007cba !important;
  border-color: #007cba !important;
  color: #ffffff !important;
  font-weight: normal !important;
}

.skyhyMode .CalendarDay--selected-span:hover,
.skyhyMode .CalendarDay__selected_span:hover {
  background-color: #005a8b !important;
  border-color: #005a8b !important;
  color: #ffffff !important;
}

.skyhyMode .CalendarDay__selected,
.skyhyMode .CalendarDay--selected,
.skyhyMode .CalendarDay__selected:active,
.skyhyMode .CalendarDay__selected:hover {
  background-color: #007cba !important;
  border-color: #007cba !important;
  color: #ffffff !important;
}

.skyhyMode .CalendarDay__selected:hover,
.skyhyMode .CalendarDay--selected:hover {
  background-color: #005a8b !important;
  border-color: #005a8b !important;
  color: #ffffff !important;
}

.skyhyMode .CalendarDay__selected_span,
.skyhyMode .CalendarDay__selected_span:active,
.skyhyMode .CalendarDay__selected_span:hover {
  background-color: #007cba !important;
  border-color: #007cba !important;
  color: #ffffff !important;
  font-weight: normal !important;
}

.skyhyMode .CalendarDay__hovered_span,
.skyhyMode .CalendarDay__hovered_span:hover,
.skyhyMode .CalendarDay__hovered_span:active {
  background-color: #e0f0f7 !important;
  border-color: #b2d4e8 !important;
  color: #007cba !important;
}

.skyhyMode .DayPicker-Day--outside {
  background-color: transparent !important;
  opacity: 0.3 !important;
}

.skyhyMode .CalendarDay--blocked-calendar,
.skyhyMode .CalendarDay--blocked-out-of-range,
.skyhyMode .CalendarDay__blocked_calendar,
.skyhyMode .CalendarDay__blocked_out_of_range {
  opacity: 0.3 !important;
  color: #cacccd !important;
  background-color: #ffffff !important;
  border-color: #e4e7e7 !important;
}

.skyhyMode .DateRangePicker_picker .CalendarDay--blocked-calendar,
.skyhyMode .DateRangePicker_picker .CalendarDay--blocked-out-of-range,
.skyhyMode .DateRangePicker_picker .CalendarDay__blocked_calendar,
.skyhyMode .DateRangePicker_picker .CalendarDay__blocked_out_of_range {
  opacity: 0.3 !important;
  color: #cacccd !important;
  background-color: #ffffff !important;
  border-color: #e4e7e7 !important;
}

.skyhyMode .BecomeCalendar .DayPicker-WeekdaysRow .DayPicker-Weekday {
  color: #ffffff;
}

.skyhyMode .saveCalenderDate .DateRangePicker_picker {
  background-color: #ffffff;
}

.skyhyMode .DateRangePicker_picker {
  background-color: #ffffff !important;
  pointer-events: auto !important;
  z-index: 9999 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.skyhyMode .DateRangePicker_picker .CalendarDay__default {
  background-color: #ffffff !important;
  color: #484848 !important;
  border-color: #e4e7e7 !important;
}

.skyhyMode .DateRangePicker_picker .CalendarDay__default:hover {
  background-color: #f2f2f2 !important;
  border-color: #d4d4d4 !important;
  color: #484848 !important;
}

.skyhyMode .DateRangePicker_picker .CalendarDay--selected-start,
.skyhyMode .DateRangePicker_picker .CalendarDay--selected-end,
.skyhyMode .DateRangePicker_picker .CalendarDay__selected_start,
.skyhyMode .DateRangePicker_picker .CalendarDay__selected_end {
  background-color: #007cba !important;
  border-color: #007cba !important;
  color: #ffffff !important;
  font-weight: bold !important;
  box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.3) !important;
}

.skyhyMode .DateRangePicker_picker .CalendarDay--in-range,
.skyhyMode .DateRangePicker_picker .CalendarDay__in_range {
  background-color: #e0f0f7 !important;
  border-color: #b2d4e8 !important;
  color: #007cba !important;
  font-weight: normal !important;
}

.skyhyMode .DateRangePicker_picker .CalendarDay--selected-span,
.skyhyMode .DateRangePicker_picker .CalendarDay__selected_span {
  background-color: #007cba !important;
  border-color: #007cba !important;
  color: #ffffff !important;
  font-weight: normal !important;
}

.skyhyMode .DateRangePicker_picker .CalendarDay__selected,
.skyhyMode .DateRangePicker_picker .CalendarDay--selected {
  background-color: #007cba !important;
  border-color: #007cba !important;
  color: #ffffff !important;
}

.skyhyMode .marketplaceDateRange .DateRangePicker_picker,
.skyhyMode .marketplaceDateRange ~ * .DateRangePicker_picker,
body.skyhyMode .DateRangePicker_picker {
  background-color: #ffffff !important;
  background: #ffffff !important;
  pointer-events: auto !important;
  z-index: 9999 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.skyhyMode .DateRangePicker_picker .DayPicker,
.skyhyMode .DateRangePicker_picker .DayPicker__horizontal {
  border-radius: 12px !important;
}

.skyhyMode .DateRangePicker_picker .CalendarMonthGrid {
  border-radius: 12px !important;
}

.skyhyMode .marketplaceDateRange .DayPicker,
.skyhyMode .marketplaceDateRange ~ * .DayPicker,
body.skyhyMode .DayPicker {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #484848 !important;
  pointer-events: auto !important;
}

.skyhyMode .marketplaceDateRange .CalendarDay--blocked-calendar,
.skyhyMode .marketplaceDateRange .CalendarDay--blocked-out-of-range,
.skyhyMode .marketplaceDateRange ~ * .CalendarDay--blocked-calendar,
.skyhyMode .marketplaceDateRange ~ * .CalendarDay--blocked-out-of-range,
body.skyhyMode .CalendarDay--blocked-calendar,
body.skyhyMode .CalendarDay--blocked-out-of-range {
  background-color: #ffffff !important;
  border-color: #e4e7e7 !important;
  color: #cacccd !important;
  cursor: not-allowed !important;
  pointer-events: auto !important;
}

.skyhyMode .marketplaceDateRange .DayPickerNavigation_button,
.skyhyMode .marketplaceDateRange ~ * .DayPickerNavigation_button,
body.skyhyMode .DayPickerNavigation_button {
  background-color: #ffffff !important;
  border-color: #e4e7e7 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.skyhyMode .marketplaceDateRange .DayPickerNavigation_button:hover,
.skyhyMode .marketplaceDateRange ~ * .DayPickerNavigation_button:hover,
body.skyhyMode .DayPickerNavigation_button:hover {
  background-color: #f2f2f2 !important;
  border-color: #d4d4d4 !important;
  cursor: pointer !important;
}

.skyhyMode .marketplaceDateRange .CalendarMonth_caption,
.skyhyMode .marketplaceDateRange ~ * .CalendarMonth_caption,
body.skyhyMode .CalendarMonth_caption {
  color: #484848 !important;
}

.skyhyMode .marketplaceDateRange .DayPicker_weekHeader,
.skyhyMode .marketplaceDateRange ~ * .DayPicker_weekHeader,
body.skyhyMode .DayPicker_weekHeader {
  color: #484848 !important;
}

.skyhyMode .SingleDatePicker_picker {
  background-color: #ffffff !important;
}

.skyhyMode .StripeElement {
  background: transparent;
}

.skyhyMode .InputElement {
  color: #000000 !important;
  background-color: #ffffff !important;
}

.skyhyMode .centerLink2 a {
  color: #ffffff !important;
}

.skyhyMode .centerLink2::before,
.skyhyMode .centerLink2::after {
  background-color: #ffffff !important;
}

.skyhyMode .darkBgHeder {
  background-color: #61ccf6 !important;
}

.skyhyMode .layout5Css .layout5Searchform {
  background-color: #61ccf6;
}

.skyhyMode .fixedBgHeader {
  background-color: #61ccf6 !important;
}

.skyhyMode select {
  background-image: url('../SiteIcons/chevron-down-dark.svg') !important;
}

.skyhyMode .commonHeader.navbar-default .navbar-nav > li > a,
.skyhyMode .commonHeader.navbar-default .navbar-nav > li > a:focus,
.skyhyMode .commonHeader.navbar-default .navbar-nav > li > a:hover,
.skyhyMode .commonHeader.navbar-default .navbar-nav > li > a:active {
  color: #003366;
}

.skyhyMode .loginModal .modal-title {
  color: var(--common-text-color);
}

.skyhyMode .modal-title {
  color: var(--common-text-color);
}

.skyhyMode .dashboard {
  background: #61ccf6;
}

/* Make all bordered components white background on dashboard page in skyhy mode */
.skyhyMode .ViewProfile .commonListingBg,
.skyhyMode .ViewProfile .dashBoardSideMenu,
.skyhyMode .ViewProfile .dashBoardSideMenuBox,
.skyhyMode .ViewProfile .reviewHeading,
.skyhyMode .ViewProfile .panel-default,
.skyhyMode .ViewProfile .panel-body,
.skyhyMode .ViewProfile .panel-heading,
.skyhyMode .ViewProfile .panel-footer,
.skyhyMode .ViewProfile .tripContainer,
.skyhyMode .ViewProfile .PanelBody,
.skyhyMode .ViewProfile .listDeatilsGrid,
.skyhyMode .ViewProfile .panelHeader,
.skyhyMode .dashBoardGrid .commonListingBg,
.skyhyMode .dashBoardGrid .dashBoardSideMenu,
.skyhyMode .dashBoardGrid .dashBoardSideMenuBox,
.skyhyMode .dashBoardGrid .reviewHeading,
.skyhyMode .dashBoardGrid .tripContainer,
.skyhyMode .dashBoardGrid .PanelBody,
.skyhyMode .dashBoardGrid .listDeatilsGrid,
.skyhyMode .dashBoardGrid .panelHeader,
.skyhyMode .dashBoardListingGrid .commonListingBg,
.skyhyMode .dashBoardListingGrid .dashBoardSideMenu,
.skyhyMode .dashBoardListingGrid .dashBoardSideMenuBox,
.skyhyMode .dashBoardListingGrid .reviewHeading,
.skyhyMode .dashBoardListingGrid .tripContainer,
.skyhyMode .dashBoardListingGrid .PanelBody,
.skyhyMode .dashBoardListingGrid .listDeatilsGrid,
.skyhyMode .dashBoardListingGrid .panelHeader {
  background-color: #ffffff !important;
}

.skyhyMode .tripContainer .bgBlack,
.skyhyMode .commonListingBg.tripContainer.bgBlack {
  background-color: #ffffff !important;
}

/* Target any element with a border in dashboard context - use attribute selector for elements with border style */
.skyhyMode .ViewProfile [style*='border'],
.skyhyMode .dashBoardGrid [style*='border'],
.skyhyMode .dashBoardListingGrid [style*='border'] {
  background-color: #ffffff !important;
}

/* Target elements that have border property set via CSS (common bordered classes) */
.skyhyMode .ViewProfile *[class*='Border'],
.skyhyMode .ViewProfile *[class*='border'],
.skyhyMode .dashBoardGrid *[class*='Border'],
.skyhyMode .dashBoardGrid *[class*='border'] {
  background-color: #ffffff !important;
}

.skyhyMode .darkModeFooterLink,
.skyhyMode .darkModeFooterLink:hover,
.skyhyMode .darkModeFooterLink:active,
.skyhyMode .darkModeFooterLink:focus {
  color: #ffffff !important;
}

/* Search Result Page Titles - White in Skyhy Mode */
.skyhyMode .sectionTitle,
.skyhyMode .title {
  color: #ffffff !important;
}

/* Search Result See More Button - White in Skyhy Mode */
.skyhyMode .seeMoreButton {
  color: #ffffff !important;
}

.skyhyMode .seeMoreButton:hover {
  color: #e0f2fe !important;
}

.skyhyMode .arrowIcon {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.darkMode ::selection {
  background: var(--darkmode-selection-color);
}

.darkMode .textWhite {
  color: var(--darkmode-text-color) !important;
}

.darkMode .bgBlack {
  background-color: var(--darkmode-primary-color) !important;
}

.darkMode svg use {
  filter: invert(96%) sepia(100%) saturate(0%) hue-rotate(86deg) brightness(103%) contrast(106%);
}

.darkMode .commonHeader .dropdown-menu {
  background-color: var(--darkmode-primary-color);
}

.darkMode .commonHeader .dropdown-menu > li > a {
  color: var(--darkmode-text-color);
}

.darkMode .commonHeader .dropdown-menu > li > form > button {
  color: var(--darkmode-text-color);
}

.darkMode .darkModeInnerMenu.navbar-default {
  background-color: var(--darkmode-primary-color) !important;
}

.darkMode .whyHostHeader.navbar-default {
  background-color: transparent !important;
}

.darkMode .DateInput_input {
  color: var(--darkmode-text-color) !important;
}

.darkMode .form-control {
  color: var(--darkmode-text-color);
  background-color: var(--darkmode-primary-color);
}

.darkMode .textWhite a {
  color: var(--darkmode-text-color) !important;
}

.darkMode .modal-content {
  background-color: var(--darkmode-primary-color);
}

.darkMode .bgBlackHover:hover,
.darkMode .bgBlackHover:focus,
.darkMode .bgBlackHover:active {
  background-color: var(--darkmode-primary-color) !important;
}

.darkMode .rc-pagination-item {
  background-color: var(--darkmode-primary-color);
}

.darkMode .rc-pagination-item a {
  color: var(--darkmode-text-color);
}

.darkMode .modal-header {
  color: var(--darkmode-text-color);
}

.darkMode .modal-header .close {
  color: var(--darkmode-text-color);
}

.darkMode .searchMapSection .gm-bundled-control div:nth-child(1) {
  background: var(--darkmode-primary-color) !important;
}

.darkMode .gm-control-active img {
  filter: invert(96%) sepia(100%) saturate(0%) hue-rotate(86deg) brightness(103%) contrast(106%);
}

.darkMode .menuModal .nav-tabs > li.active > a,
.darkMode .menuModal .nav-tabs > li.active > a:focus,
.darkMode .menuModal .nav-tabs > li.active > a:hover {
  color: var(--darkmode-text-color);
}

.darkMode .svgImg img {
  filter: invert(96%) sepia(100%) saturate(0%) hue-rotate(86deg) brightness(103%) contrast(106%);
}

.darkMode .calendarContainerDark {
  margin-left: 0;
}

.darkMode .bgTransparent,
.darkMode .bgTransparent:hover,
.darkMode .bgTransparent:focus {
  background: transparent !important;
}

.darkMode .DateInput {
  background: transparent;
}

.darkMode .DateRangePickerInput {
  background-color: transparent;
}

.darkMode .DayPicker__horizontal {
  background: var(--darkmode-primary-color);
  border-radius: 0;
}

.darkMode .CalendarMonth {
  background: var(--darkmode-primary-color);
}

.darkMode .CalendarMonth_caption {
  color: var(--darkmode-text-color);
}

.darkMode .DayPicker_weekHeader {
  color: var(--darkmode-text-color);
}

.darkMode .CalendarMonthGrid {
  background: transparent;
}

.darkMode .DateInput_fangShape {
  fill: var(--darkmode-primary-color);
}

.darkMode .borderDark {
  border-color: var(--darkmode-text-color);
}

.darkMode .menuActive .sideNav,
.darkMode .sideNav:focus {
  color: var(--darkmode-text-color);
  background: transparent;
}

.darkMode .sideNav {
  color: var(--darkmode-text-color);
}

.darkMode .iconBtnDark,
.darkMode .iconBtnDark:focus,
.darkMode .iconBtnDark:hover,
.darkMode .iconBtnDark:active {
  color: var(--darkmode-text-color);
  background: transparent !important;
}

.darkMode .ListHeader.navbar-default .navbar-nav > li > a {
  background: transparent;
  color: var(--darkmode-text-color);
}

.darkMode .BecomeCalendar .DayPicker-Caption {
  color: var(--darkmode-text-color);
}

.darkMode .DayPicker-NavButton--prev {
  filter: invert(96%) sepia(100%) saturate(0%) hue-rotate(86deg) brightness(103%) contrast(106%);
}

.darkMode .DayPicker-NavButton--next {
  filter: invert(96%) sepia(100%) saturate(0%) hue-rotate(86deg) brightness(103%) contrast(106%);
}

.darkMode .DayPicker-Day {
  background-color: var(--darkmode-primary-color);
}

.darkMode .DayPicker {
  background-color: transparent !important;
}

.darkMode .DayPicker-Day--outside {
  background-color: transparent !important;
}

.darkMode .BecomeCalendar .DayPicker-WeekdaysRow .DayPicker-Weekday {
  color: var(--darkmode-text-color);
}

/* Enhanced react-dates dark mode styling */
.darkMode .SingleDatePicker,
.darkMode .SingleDatePicker_picker,
.darkMode .DateRangePicker,
.darkMode .DateRangePicker_picker {
  background-color: var(--darkmode-primary-color, #171d37) !important;
  border-color: var(--border-color, #2a2f45) !important;
}

.darkMode .DayPicker__horizontal {
  background: var(--darkmode-primary-color, #171d37) !important;
  border: 1px solid var(--border-color, #2a2f45) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.darkMode .CalendarMonth {
  background: var(--darkmode-primary-color, #171d37) !important;
}

.darkMode .CalendarMonth_table {
  background: var(--darkmode-primary-color, #171d37) !important;
}

.darkMode .CalendarMonth_caption {
  color: var(--darkmode-text-color, #c7d8eb) !important;
}

.darkMode .DayPicker_weekHeader {
  background: var(--darkmode-primary-color, #171d37) !important;
}

.darkMode .DayPicker_weekHeader_li {
  color: var(--darkmode-text-color, #c7d8eb) !important;
}

.darkMode .CalendarDay {
  background-color: var(--darkmode-primary-color, #171d37) !important;
  color: var(--darkmode-text-color, #c7d8eb) !important;
  border-color: var(--border-color, #2a2f45) !important;
}

.darkMode .CalendarDay:hover {
  background-color: var(--darkmode-secondary-color, #0e142f) !important;
  border-color: var(--btn-primary-bg, #31b9f6) !important;
  color: var(--darkmode-text-color, #c7d8eb) !important;
}

.darkMode .CalendarDay--selected,
.darkMode .CalendarDay--selected-start,
.darkMode .CalendarDay--selected-end {
  background-color: var(--btn-primary-bg, #31b9f6) !important;
  border-color: var(--btn-primary-bg, #31b9f6) !important;
  color: #ffffff !important;
}

.darkMode .CalendarDay--selected-span {
  background-color: rgba(49, 185, 246, 0.3) !important;
  border-color: rgba(49, 185, 246, 0.5) !important;
  color: var(--darkmode-text-color, #c7d8eb) !important;
}

.darkMode .CalendarDay--today {
  border-color: var(--btn-primary-bg, #31b9f6) !important;
  color: var(--btn-primary-bg, #31b9f6) !important;
  font-weight: 700 !important;
}

.darkMode .CalendarDay--blocked-calendar,
.darkMode .CalendarDay--blocked-out-of-range {
  background-color: var(--darkmode-primary-color, #171d37) !important;
  color: #64748b !important;
  opacity: 0.4 !important;
}

.darkMode .CalendarDay--blocked-calendar:hover,
.darkMode .CalendarDay--blocked-out-of-range:hover {
  background-color: var(--darkmode-primary-color, #171d37) !important;
  border-color: var(--border-color, #2a2f45) !important;
  color: #64748b !important;
}

.darkMode .DayPickerNavigation_button {
  background-color: var(--darkmode-primary-color, #171d37) !important;
  border-color: var(--border-color, #2a2f45) !important;
}

.darkMode .DayPickerNavigation_button:hover {
  background-color: var(--darkmode-secondary-color, #0e142f) !important;
  border-color: var(--btn-primary-bg, #31b9f6) !important;
}

.darkMode .DayPickerNavigation_button svg {
  fill: var(--darkmode-text-color, #c7d8eb) !important;
}

.darkMode .DayPickerNavigation_button:hover svg {
  fill: var(--btn-primary-bg, #31b9f6) !important;
}

.darkMode .saveCalenderDate .DateRangePicker_picker {
  background-color: transparent;
}

.darkMode .StripeElement {
  background: transparent;
}

.darkMode .InputElement {
  color: var(--darkmode-text-color) !important;
}

.darkMode .centerLink2 a {
  color: var(--darkmode-text-color) !important;
}

.darkMode .centerLink2::before,
.darkMode .centerLink2::after {
  background-color: var(--darkmode-text-color) !important;
}

.darkMode .darkBgHeder {
  background-color: var(--darkmode-primary-color) !important;
}

.darkMode .layout5Css .layout5Searchform {
  background-color: var(--darkmode-primary-color);
}

.darkMode .fixedBgHeader {
  background-color: var(--darkmode-primary-color) !important;
}

.darkMode select {
  background-image: url('../SiteIcons/chevron-down-dark.svg') !important;
}

.darkMode .adminstyle .reactable-column-header {
  background-color: var(--darkmode-primary-color);
}

.darkMode .NewResponsiveTableAdmin table th {
  background-color: var(--darkmode-primary-color) !important;
  color: var(--darkmode-text-color) !important;
}

.darkMode .NewAdminResponsiveTable table tr {
  background-color: var(--darkmode-primary-color);
  color: var(--darkmode-text-color) !important;
}

.darkMode .adminstyle .table > tbody > tr > td {
  color: var(--darkmode-text-color) !important;
}

.darkMode .adminstyle table tbody tr:hover {
  color: var(--common-text-color) !important;
  background-color: transparent;
}

.darkMode .adminPhotoUplod .dropzone {
  background-color: var(--darkmode-primary-color);
}

.darkMode .ql-snow .ql-stroke {
  stroke: var(--darkmode-text-color);
}

.darkMode .ql-container {
  background-color: var(--darkmode-primary-color) !important;
}

.darkMode .ql-editor p {
  color: var(--darkmode-text-color);
}

.darkMode .ql-snow .ql-picker {
  color: var(--darkmode-text-color);
}

.darkMode .ql-snow .ql-fill {
  fill: var(--darkmode-text-color);
}

.darkMode .ql-editor.ql-blank::before {
  color: rgb(255 254 254 / 60%);
}

.darkMode .DateRangePicker_picker {
  background-color: var(--darkmode-primary-color);
}

.darkMode .activeDark a {
  border-color: var(--darkmode-text-color);
}

.darkMode .listingTab .nav-tabs > li > a {
  color: var(--darkmode-text-color);
  background: transparent;
}

.darkMode .listingTab .nav-tabs > li.active > a,
.darkMode .listingTab .nav-tabs > li.active > a:focus,
.darkMode .listingTab .nav-tabs > li.active > a:hover {
  border: inherit;
  border-bottom: 1px solid var(--btn-secondary-bg);
  color: var(--btn-secondary-bg);
}

.darkMode .commonListingBg .panel-body {
  background: transparent !important;
}

.darkMode .payoutTable .table > tbody > tr > td {
  color: var(--darkmode-text-color);
  background: var(--darkmode-primary-color);
}

.darkMode .searchMapSection .gm-control-active {
  background: var(--darkmode-primary-color) !important;
}

.darkMode .DateRangePickerInput_arrow_svg {
  fill: var(--darkmode-text-color);
}

.darkMode .darkModeInfoContentBg {
  background-color: var(--darkmode-primary-color);
}

.darkMode .darkModeTextWhite {
  color: var(--darkmode-text-color);
}

.darkMode .radiusColorTwo::after,
.darkMode .darkModeRadiusColor::after {
  background: var(--darkmode-secondary-color);
}

.darkMode .messageTextArea::before {
  border-color: var(--darkmode-primary-color) transparent transparent;
}

.darkMode .darkModeTextBlack {
  color: var(--darkmode-primary-color);
}

.darkMode .DayPicker-Day--disabled {
  background: repeating-linear-gradient(
    -45deg,
    rgb(0 0 0),
    rgb(15 11 11) 3px,
    rgb(63 63 63) 3px,
    rgb(235, 235, 235) 4px
  ) !important;
}

.darkMode .coverulDark li {
  color: var(--darkmode-text-color);
}

.darkMode .publishArrow select {
  background-image: url(../SiteIcons/listSelectArrow.svg) !important;
}

.darkMode .dashboard {
  background: var(--darkmode-primary-color);
}

.darkMode .darkModeFooterBanner {
  /* filter: invert(8%) sepia(5%) saturate(2167%) hue-rotate(334deg) brightness(92%) contrast(88%); */
  webkit-filter: brightness(36%) contrast(115%) grayscale(26%) saturate(9%);
  filter: brightness(36%) contrast(115%) grayscale(26%) saturate(9%);
}

.darkMode .footerBannerImg {
  background-image: url(../SiteImages/darkFooterBg.svg);
  background-repeat: no-repeat;
}

.darkMode .darkModeFooterLink,
.darkMode .darkModeFooterLink:hover,
.darkMode .darkModeFooterLink:active,
.darkMode .darkModeFooterLink:focus {
  color: var(--darkmode-text-color) !important;
}

/* Media queries */

.darkMode .dashRightBg {
  background: var(--darkmode-secondary-color);
}

.darkMode .dashRightBg::before {
  border-color: transparent var(--darkmode-secondary-color) transparent transparent;
}

.darkMode .dashRightBg::after {
  background: var(--darkmode-primary-color);
}

.darkMode .dashRightBgTwo::before {
  border-color: transparent var(--darkmode-primary-color) transparent transparent;
}

.darkMode .listIntroBgDark {
  background-image: url('../SiteImages/becomeHostBgDark.svg') !important;
}

.darkMode .closeButtonPositionDark {
  background: var(--darkmode-primary-color);
}

.darkMode .payoutTable .table > thead > tr > th {
  background: var(--darkmode-primary-color);
}

.darkMode .headerNewDesign .navbar-default .navbar-nav > li a,
.darkMode .headerNewDesign .navbar-default .navbar-nav > li > form > button {
  color: var(--darkmode-text-color) !important;
}

.darkMode .darkModeCloseColor {
  color: var(--darkmode-text-color);
}

.darkMode .tripDropDown button::before {
  filter: invert(96%) sepia(100%) saturate(0%) hue-rotate(86deg) brightness(103%) contrast(106%);
}

.darkMode .modal-header .close {
  filter: invert(96%) sepia(100%) saturate(0%) hue-rotate(86deg) brightness(103%) contrast(106%);
}

.darkMode .menuModal .navbar-nav > li > a {
  color: var(--darkmode-text-color);
}

.darkMode .headerNewDesign .navbar-default .navbar-nav > li > a {
  color: var(--darkmode-text-color);
}

.darkMode .commonHeader.navbar-default .navbar-nav > li > a,
.darkMode .commonHeader.navbar-default .navbar-nav > li > a:focus,
.darkMode .commonHeader.navbar-default .navbar-nav > li > a:hover,
.darkMode .commonHeader.navbar-default .navbar-nav > li > a:active {
  color: var(--darkmode-text-color);
}

.darkMode .loginModal .modal-title {
  color: var(--darkmode-text-color);
}

.darkMode .rentAllAdminHeader .dropdown-menu,
.darkMode .rentAllAdminHeader .dropdown-menu > li > a:hover,
.darkMode .rentAllAdminHeader .dropdown-menu > li > a:focus {
  background: var(--darkmode-primary-color);
}

.darkMode .rentAllAdminHeader .dropdown-menu > li > a {
  color: var(--darkmode-text-color);
}

.darkMode .darkModeMobileHeader .hamburger .icon-bar {
  background: var(--darkmode-text-color);
}

.darkMode .rentAllAdminHeader {
  background: var(--darkmode-primary-color);
}

.darkMode .rentAllAdminHeader.navbar-default .navbar-nav > li > a,
.darkMode .rentAllAdminHeader.navbar-default .navbar-nav > li > form > button {
  background: transparent;
  color: var(--darkmode-text-color);
}

.darkMode .darkModeMobileHeader {
  background: var(--darkmode-primary-color);
}

.darkMode .st0 {
  fill: var(--darkmode-text-color) !important;
}

.darkMode .logoutIconDarkMode {
  filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(235deg) brightness(100%) contrast(103%);
}

.darkMode .linetextDarkmode::after {
  background-color: var(--darkmode-text-color);
}

.darkMode .linetextDarkmode::before {
  background-color: var(--darkmode-text-color);
}

.darkMode .tripDropDown .dropdown-menu {
  background: var(--darkmode-primary-color);
}

.darkMode .tripDropDown a {
  color: var(--darkmode-text-color) !important;
}

.darkMode .tltipDarkMode {
  background: var(--darkmode-primary-color);
  color: var(--darkmode-text-color);
}

.darkMode .tltipDarkMode::after {
  background-color: var(--darkmode-primary-color);
}

.darkMode .searchBtnDark,
.darkMode .searchBtnDark:hover,
.darkMode .searchBtnDark:focus,
.darkMode .searchBtnDark:active {
  color: var(--darkmode-text-color) !important;
}

.darkMode .dotDark {
  color: var(--darkmode-text-color);
}

.darkMode .darkActive {
  background: transparent !important;
}

.darkMode .amenitiesTab .nav-tabs > li.active > a,
.darkMode .amenitiesTab .nav-tabs > li.active > a:focus,
.darkMode .amenitiesTab .nav-tabs > li.active > a:hover {
  color: var(--darkmode-text-color);
  background: transparent;
}

.darkMode .listBannerImageBgDark {
  display: none;
}

.darkMode .amenitiesCheckBox .icheckbox_square-green.checked {
  background-color: var(--darkmode-primary-color) !important;
}

.darkMode .icheckbox_square-green {
  background-color: transparent !important;
}

.darkMode .uploadSizeCss {
  color: var(--darkmode-text-color);
}

.darkMode .photoListDropDown .dropdown-menu {
  background: var(--darkmode-primary-color);
}

.darkMode .photoListDropDown a,
.darkMode .photoListDropDown .dropdown-menu > li > a:hover {
  color: var(--darkmode-text-color) !important;
}

.darkMode .filepicker .dz-message {
  color: var(--darkmode-text-color);
}

.darkMode .saveCalendarDark svg {
  fill: var(--darkmode-text-color) !important;
}

.darkMode .bgBlackTwo {
  background: var(--darkmode-secondary-color) !important;
}

.darkMode .tripDropDown button {
  color: var(--darkmode-text-color) !important;
}

.darkMode .CalendarDay__blocked_out_of_range,
.darkMode .CalendarDay__blocked_out_of_range:active,
.darkMode .CalendarDay__blocked_out_of_range:hover {
  color: var(--common-text-Secondry-color) !important;
  background: var(--darkmode-primary-color);
}

.darkMode .CalendarDay__default {
  background: var(--darkmode-primary-color);
  color: var(--darkmode-text-color);
}

.darkMode .CalendarDay__default:hover {
  background: var(--calendarDay-select-color);
  color: var(--white-color);
}

.darkMode .CalendarDay__default {
  color: var(--white-color);
}

.darkMode .rc-pagination-total-text {
  color: var(--darkmode-text-color);
}

.darkMode .rc-pagination-prev a,
.darkMode .rc-pagination-next a {
  color: #ccc;
}

.darkMode .rc-pagination-disabled a {
  color: #666;
}

.darkMode .panelRightMessageDark {
  background: var(--darkmode-primary-color);
}

.darkMode .panelRightMessageDark::before {
  border-color: var(--darkmode-primary-color) transparent transparent;
}

.darkMode .panelRightMessageDark::after {
  background: var(--darkmode-secondary-color);
}

.darkMode .dotTextDark {
  background: var(--darkmode-text-color);
}

.darkMode .react-tel-input input[type='tel'] {
  background: var(--darkmode-secondary-color);
  color: var(--darkmode-text-color) !important;
}

.darkMode .countryInputPhone .react-tel-input .selected-flag .arrow {
  filter: invert(96%) sepia(100%) saturate(0%) hue-rotate(86deg) brightness(103%) contrast(106%);
}

.darkMode .countryInputPhone .react-tel-input .flag-dropdown {
  background-color: var(--darkmode-secondary-color);
}

.darkMode .react-tel-input .country-list {
  background-color: var(--darkmode-secondary-color);
}

.darkMode .countryInputPhone .react-tel-input .country-list .country-name {
  color: var(--darkmode-text-color) !important;
}

.darkMode .Loader__background {
  background-color: transparent !important;
}

.darkMode .loadingOverlayDark {
  background-color: transparent !important;
}

.darkMode .hijnLS {
  box-shadow: inherit;
  background: var(--darkmode-primary-color);
  border: 1px solid var(--border-secondary-color);
  border-top: 0;
}

.darkMode .beLwEX {
  background: var(--darkmode-primary-color);
}

.darkMode .beLwEX:hover {
  background: var(--darkmode-secondary-color);
}

.darkMode .fiaijo:hover {
  background: var(--darkmode-secondary-color);
}

.darkMode ::marker {
  color: var(--darkmode-primary-color);
}

.darkMode .lightModeImg {
  display: none;
}

.darkMode .darkModeImg {
  display: block;
}

.darkMode .listIntroBgImage {
  background-image: url('../SiteImages/darkIntroBg.svg') !important;
}

.darkMode .searchFormContainerDark {
  background-color: var(--darkmode-secondary-color);
}

.skyhyMode .searchFormContainerDark {
  background-color: #ffffff !important;
}

.skyhyMode .locationInputContainer {
  background-color: #ffffff !important;
}

.skyhyMode .locationInputContainer.searchFormContainerDark {
  background-color: #ffffff !important;
}

.skyhyMode .layoutOneLocationSearch {
  background-color: #ffffff !important;
}

.skyhyMode .layoutOneLocationSearch.searchFormContainerDark {
  background-color: #ffffff !important;
}

.skyhyMode .layoutOneLocationSearch.locationInputContainer {
  background-color: #ffffff !important;
}

.skyhyMode .geoSuggestLayout1 {
  background-color: transparent !important;
}

.skyhyMode .locationInputContainer .geoSuggestLayout1 {
  background-color: transparent !important;
}

.skyhyMode .locationInputContainer input,
.skyhyMode .locationInputContainer .newGeoSuggestDark,
.skyhyMode .layoutOneLocationSearch input,
.skyhyMode .layoutOneLocationSearch .newGeoSuggestDark {
  --background-primary-bg: #ffffff !important;
  --background-color: #ffffff !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
}

.skyhyMode .locationInputContainer,
.skyhyMode .layoutOneLocationSearch,
.skyhyMode .searchFormContainerDark {
  --background-primary-bg: #ffffff !important;
  --background-color: #ffffff !important;
}

.skyhyMode .locationInputContainer .searchDropdown,
.skyhyMode .layoutOneLocationSearch .searchDropdown,
.skyhyMode .searchFormContainer .searchDropdown,
.skyhyMode .searchFormContainerDark .searchDropdown,
.skyhyMode .locationInputContainer.searchFormContainerDark .searchDropdown,
.skyhyMode .layoutOneLocationSearch.locationInputContainer .searchDropdown {
  background-color: #ffffff !important;
  background: #ffffff !important;
  background-image: none !important;
}

.skyhyMode .locationInputContainer .searchDropdown .dropdownSection,
.skyhyMode .layoutOneLocationSearch .searchDropdown .dropdownSection,
.skyhyMode .searchFormContainer .searchDropdown .dropdownSection {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

.skyhyMode .searchFormContainer button.btnPrimary,
.skyhyMode .locationInputContainer button.btnPrimary,
.skyhyMode .layoutOneLocationSearch button.btnPrimary,
.skyhyMode .searchBtnContainer button.btnPrimary {
  background-color: #046ec1 !important;
  border-color: #046ec1 !important;
  color: #ffffff !important;
}

.skyhyMode .searchFormContainer button.btnPrimary:hover,
.skyhyMode .searchFormContainer button.btnPrimary:focus,
.skyhyMode .locationInputContainer button.btnPrimary:hover,
.skyhyMode .layoutOneLocationSearch button.btnPrimary:hover,
.skyhyMode .searchBtnContainer button.btnPrimary:hover {
  background-color: #035a9e !important;
  border-color: #035a9e !important;
  color: #ffffff !important;
}

.darkMode .searchFilterCloseIconDark {
  color: var(--darkmode-text-color);
}

.darkMode .headerNewDesign .commonHeader.navbar-default .navbar-nav > li > form > button {
  color: var(--darkmode-text-color);
}

.darkMode .commonHeader.navbar-default .navbar-nav > li > form > button {
  color: var(--darkmode-text-color);
}

.darkMode .searchHeaderPlaceSuggest {
  background: var(--darkmode-secondary-color);
  background-image: url(../SiteIcons/listLocatiionPin.svg);
  background-repeat: no-repeat;
  background-position: 10px 50%;
  color: var(--darkmode-text-color) !important;
}

.darkMode .viewPhotosBtnDark {
  border-color: var(--border-color);
}

.darkMode .contactHostlistTextRTL ::marker {
  color: var(--darkmode-text-color);
}

.darkMode .ElementsApp .InputElement {
  color: var(--darkmode-text-color);
}

.darkMode .adminstyle table select {
  background-color: var(--darkmode-secondary-color);
  color: var(--darkmode-text-color);
}

.darkMode .input-group-addon {
  background-color: var(--darkmode-secondary-color);
  color: var(--darkmode-text-color);
}

.darkMode .newsBoxBorderRadius .newsBoxBorder {
  background: var(--darkmode-secondary-color);
  border-radius: 12px;
}

.darkMode .homeKindTripBorderRadius .kindTripBorder {
  background: var(--darkmode-secondary-color);
  border-radius: 12px;
}

.darkMode .linkResetDarkHover:hover {
  background: var(--darkmode-secondary-color);
}

.darkMode .darkGreen {
  background: var(--btn-secondary-bg);
}

.darkMode .darkAvater {
  background: url('../SiteIcons/avatarDark.png') no-repeat;
  background-position: 98% 50%;
}

.darkMode .darkCall {
  background: url('../SiteIcons/callDark.png') no-repeat;
  background-position: 98% 50%;
}

.darkMode .darkEmail {
  background: url('../SiteIcons/mailDarkMode.png') no-repeat;
  background-position: 98% 50%;
}

.darkMode .darkContact {
  background: url('../SiteIcons/editDark.png') no-repeat;
  background-position: 98% 20%;
}

.darkMode .customRatioButton input[type='checkbox'],
.darkMode .customRatioButton input[type='radio'] {
  margin: -4px 0 0;
  line-height: normal;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  outline: none !important;
  background: url('../SiteIcons/stepRadioBtnOffDark.svg') no-repeat;
  position: relative;
  vertical-align: middle;
}

.darkMode .darkInputColor input {
  color: var(--darkmode-text-color) !important;
}

.darkMode .viewListingMap .gm-bundled-control div:nth-child(1) {
  background: var(--darkmode-primary-color) !important;
}

.darkMode .viewListingMap .gm-control-active {
  background: var(--darkmode-primary-color) !important;
}

.darkMode .amenitiesTab .nav-tabs > li > a {
  font-size: 18px;
  color: var(--darkmode-text-color);
}

.darkMode .menuModal .nav-tabs > li > a {
  color: var(--darkmode-text-color);
}

.darkMode .adminScrollBar ::-webkit-scrollbar-thumb {
  background: var(--darkmode-text-color) !important;
  width: 3px;
  border-radius: 10px;
}

/* Handle on hover */

.darkMode .adminScrollBar ::-webkit-scrollbar-thumb:hover {
  background: var(--darkmode-text-color) !important;
}

.darkMode .darkModeFilterNone,
.darkMode .dzInputContainer .dz-preview.dz-processing.dz-image-preview .dz-image img {
  filter: none !important;
}

.darkMode .stpeOneMap .gm-control-active img {
  filter: unset !important;
}

.darkMode .searchHeaderForm input::-webkit-input-placeholder {
  color: var(--darkmode-text-color) !important;
}

.darkMode .searchHeaderForm input:-moz-placeholder {
  color: var(--darkmode-text-color) !important;
}

.darkMode .ql-snow .ql-editor h1,
.darkMode .ql-snow .ql-editor h2 {
  color: var(--darkmode-text-color);
}

.darkMode .ql-snow .ql-picker-options {
  background-color: var(--darkmode-secondary-color);
}

.darkMode .tabBtnDarkMode {
  color: var(--darkmode-text-color) !important;
  border: 1px solid var(--common-text-color);
}

.darkMode .tabBtnActiveDark {
  border: 1px solid var(--border-color);
  color: var(--darkmode-text-color) !important;
}

.darkMode .refundTextColorRTL {
  text-decoration-thickness: 1px;
  text-decoration-color: var(--darkmode-text-color);
}

.darkMode .toggleButtonColor,
.darkMode .toggleButtonColor:hover,
.darkMode .toggleButtonColor:focus,
.darkMode .toggleButtonColor:active {
  color: var(--darkmode-text-color) !important;
}

.darkMode .imageWhiteColor {
  filter: invert(96%) sepia(100%) saturate(0%) hue-rotate(86deg) brightness(103%) contrast(106%);
}

.darkMode .darkModeActiveBorder::before {
  background-color: var(--darkmode-text-color);
}

.darkMode .popUpSection {
  background: var(--darkmode-primary-color);
}

.darkMode .closeIcon {
  filter: invert(100%) sepia(1%) saturate(602%) hue-rotate(187deg) brightness(114%) contrast(100%);
}

.darkMode .dotStyleDarkMode {
  background-color: var(--darkmode-text-color);
}

.darkMode .locationCssDarkMode::before {
  background-color: var(--darkmode-text-color) !important;
}

.darkMode .dateReviewCssDarkMode::after {
  background-color: var(--darkmode-text-color) !important;
}

.darkMode .darkModeGuestClearBtn,
.darkMode .darkModeGuestClearBtn:hover,
.darkMode .darkModeGuestClearBtn:active,
.darkMode .darkModeGuestClearBtn:focus {
  color: var(--darkmode-text-color) !important;
  background-color: transparent !important;
}

.darkMode .listingDarkModeBg {
  background-color: var(--darkmode-secondary-color) !important;
}

.darkMode .homeTypeImageDarkMode::after {
  background-color: var(--white-color);
}

.darkMode .priceRangeLineDarkMode {
  background-color: var(--border-color);
}

.darkMode .darkModeActiveBorderHover:hover::after {
  background-color: var(--darkmode-text-color);
}

.darkMode .darkModeActiveBorderHover:hover .darkModeTypeName {
  color: var(--btn-secondary-bg);
}

.darkMode .darkModeReviewText::before {
  background-color: var(--darkmode-text-color);
}

.darkMode .darkModeActiveColor {
  opacity: 1;
}

.darkMode .typeNameColorDarkMode {
  color: var(--btn-secondary-bg) !important;
}

.darkMode .typeNamedarkMode {
  color: var(--darkmode-text-color);
}

.darkMode .imageUploadTooltipContainer {
  background-color: var(--common-darkModeTooltip-color) !important;
  border: 1px solid var(--common-darkModeTooltip-color) !important;
  color: var(--common-text-color) !important;
}

.darkMode .imageUploadTooltipContainer.popover.top > .arrow::after {
  border-top-color: var(--common-darkModeTooltip-color) !important;
}

.darkMode .imageUploadTooltipContainer.popover.top > .arrow::before {
  border-top-color: var(--common-darkModeTooltip-color) !important;
}

.darkMode .darkModeAmenitiesCheckBoxWrapper {
  background-color: var(--darkmode-primary-color) !important;
}

.darkMode .darkModeAmenitiesCheckBoxWrapper.darkModeAmenitiesChecked {
  background-color: var(--darkmode-primary-color) !important;
}

.darkMode .grayBgCurve,
.darkMode .whiteBgCurve {
  background: var(--darkmode-secondary-color);
}

.darkMode .grayBgCurve::before,
.darkMode .whiteBgCurve::before {
  border-color: transparent var(--darkmode-secondary-color) transparent transparent;
}

.darkMode .grayBgCurve::after,
.darkMode .whiteBgCurve::after {
  background: var(--darkmode-primary-color);
}

.darkMode .darkModeProfileImageBg {
  background-color: var(--darkMode-dropzone-bg-color);
  border: 1px dashed var(--border-color);
}

.darkMode .newGeoSuggestDark {
  background-color: transparent;
  color: var(--darkmode-text-color);
}

.darkMode .detailSearchForm .newGeoSuggestDark {
  background-color: var(--darkmode-primary-color);
  color: var(--darkmode-text-color);
}

.skyhyMode .newGeoSuggestDark {
  background-color: #ffffff !important;
  color: #000000 !important;
}

.darkMode .searchForm {
  background-color: var(--darkmode-primary-color);
}

.darkMode .newGeoSuggestInput {
  color: var(--darkmode-text-color);
}

.darkMode .searchPageHeaderForm {
  color: var(--darkmode-text-color) !important;
}

.skyhyMode .searchHeaderForm input,
.skyhyMode .searchHeaderForm .commonSearchNewGeoSuggest,
.skyhyMode .searchHeaderForm .searchPageHeaderForm {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
}

.skyhyMode .geoSuggestSearchPageContainer {
  background-color: transparent !important;
}

.skyhyMode .geoSuggestSearchPageContainer .placeGeoSuggestContainer {
  background-color: transparent !important;
}

.skyhyMode .geoSuggestSearchPageContainer .loadingInputContainer {
  background-color: transparent !important;
}

.skyhyMode .geoSuggestSearchPageContainer input {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
}

.skyhyMode .searchHeaderForm .DateRangePickerInput {
  background-color: transparent !important;
}

.skyhyMode .searchHeaderForm .DateInput {
  background-color: transparent !important;
}

.skyhyMode .searchHeaderForm .DateInput_input {
  background-color: #ffffff !important;
  color: #000000 !important;
}

.skyhyMode .searchHeaderForm select,
.skyhyMode .searchHeaderForm .form-control {
  background-color: #ffffff !important;
  color: #000000 !important;
}

body.skyhyMode .searchDropdown,
body.skyhyMode .searchFormContainer .searchDropdown,
body.skyhyMode .locationInputContainer .searchDropdown,
body.skyhyMode .layoutOneLocationSearch .searchDropdown,
body.skyhyMode .searchFormContainerDark .searchDropdown,
body.skyhyMode .locationInputContainer.searchFormContainerDark .searchDropdown,
body.skyhyMode .layoutOneLocationSearch.locationInputContainer .searchDropdown,
.skyhyMode .searchDropdown,
.skyhyMode .searchFormContainer .searchDropdown,
.skyhyMode .locationInputContainer .searchDropdown,
.skyhyMode .layoutOneLocationSearch .searchDropdown,
.skyhyMode .searchFormContainerDark .searchDropdown,
.skyhyMode .locationInputContainer.searchFormContainerDark .searchDropdown,
.skyhyMode .layoutOneLocationSearch.locationInputContainer .searchDropdown {
  background-color: #ffffff !important;
  background: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
}

body.skyhyMode .searchDropdown .dropdownSection,
.skyhyMode .searchDropdown .dropdownSection {
  background-color: #ffffff !important;
  background: #ffffff !important;
  background-image: none !important;
}

body.skyhyMode .searchDropdown .dropdownItem,
.skyhyMode .searchDropdown .dropdownItem {
  background-color: transparent !important;
  background: transparent !important;
}

body.skyhyMode .searchDropdown .dropdownItem:hover,
.skyhyMode .searchDropdown .dropdownItem:hover {
  background-color: #f9fafb !important;
  background: #f9fafb !important;
}

body.skyhyMode .searchDropdown .itemTitle,
body.skyhyMode .searchDropdown .itemSubtitle,
body.skyhyMode .searchDropdown .itemMeta,
body.skyhyMode .searchDropdown .sectionLabel,
.skyhyMode .searchDropdown .itemTitle,
.skyhyMode .searchDropdown .itemSubtitle,
.skyhyMode .searchDropdown .itemMeta,
.skyhyMode .searchDropdown .sectionLabel {
  color: #484848 !important;
}

body.skyhyMode .searchDropdown .seeMoreButton,
.skyhyMode .searchDropdown .seeMoreButton {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

body.skyhyMode .searchDropdown .seeMoreButton:hover,
.skyhyMode .searchDropdown .seeMoreButton:hover {
  background-color: #f9fafb !important;
  background: #f9fafb !important;
}

body.skyhyMode .searchDropdown .seeMoreText,
.skyhyMode .searchDropdown .seeMoreText {
  color: #3b9ed8 !important;
}

.skyhyMode .searchHeaderForm .geoSuggestSearchPageContainer .homepageGeoSuggestsList {
  background: #ffffff !important;
}

.skyhyMode .searchHeaderForm .geoSuggestSearchPageContainer .homepageGeoSuggestsListItem {
  color: #003366 !important;
}

.skyhyMode .searchHeaderForm .geoSuggestSearchPageContainer .homepageGeoSuggestsListItem:hover,
.skyhyMode .searchHeaderForm .geoSuggestSearchPageContainer .homepageGeoSuggestsListItem:focus {
  background: rgba(0, 51, 102, 0.1) !important;
  color: #003366 !important;
}

.darkMode .pac-container,
.darkMode .suggestItem {
  background-color: var(--darkmode-primary-color);
}

.darkMode .pac-item,
.darkMode .pac-item-query {
  color: var(--darkmode-text-color);
}

.darkMode .pac-item:hover > .pac-item-query {
  color: black !important;
}

.darkMode .suggestItem {
  color: var(--darkmode-text-color);
}

.darkMode .pac-item:hover .darkMode .pac-item:focus {
  background: rgb(242, 242, 242) !important;
  color: black !important;
}

.darkMode .homepageGeoSuggestsList:after {
  background: url('../SiteIcons/darkPoweredByGoogle.png') no-repeat;
  background-position: center left 98%;
  background-size: 80px 12px;
}

.rtl.darkMode .homepageGeoSuggestsList:after {
  background-position: center right 98%;
}

.skyhyMode .homepageGeoSuggestsList {
  background: #ffffff !important;
}

.skyhyMode .geoSuggestLayout1 .homepageGeoSuggestsList {
  background: #ffffff !important;
}

.skyhyMode .locationInputContainer .homepageGeoSuggestsList,
.skyhyMode .layoutOneLocationSearch .homepageGeoSuggestsList,
.skyhyMode .searchFormContainer .homepageGeoSuggestsList {
  background: #ffffff !important;
}

.skyhyMode .homepageGeoSuggestsListItem {
  color: #003366 !important;
}

.skyhyMode .geoSuggestLayout1 .homepageGeoSuggestsListItem {
  color: #003366 !important;
}

.skyhyMode .homepageGeoSuggestsListItem:hover,
.skyhyMode .homepageGeoSuggestsListItem:focus,
.skyhyMode .homepageGeoSuggestsListItem.homepageGeoSuggestsListItemActive {
  background: rgba(0, 51, 102, 0.1) !important;
  color: #003366 !important;
}

.skyhyMode .geoSuggestLayout1 .homepageGeoSuggestsListItem:hover,
.skyhyMode .geoSuggestLayout1 .homepageGeoSuggestsListItem:focus,
.skyhyMode .geoSuggestLayout1 .homepageGeoSuggestsListItem.homepageGeoSuggestsListItemActive {
  background: rgba(0, 51, 102, 0.1) !important;
  color: #003366 !important;
}

@media screen and (max-width: 1199px) {
  .darkMode .mobileMenuDark {
    background: var(--darkmode-primary-color);
  }

  .skyhyMode .closeButtonPositionDark {
    background: #ffffff !important;
  }

  .skyhyMode .closeColor img,
  .skyhyMode .closeButtonPosition img,
  .skyhyMode .closeButtonPositionDark img {
    filter: brightness(0) !important;
  }

  .darkMode .whyHostHeader.navbar-default {
    background-color: var(--darkmode-primary-color) !important;
  }

  .darkMode .darkModeActiveBorderHover:hover .darkModeTypeName {
    color: var(--hometype-name-color);
  }

  .darkMode .typeNameColorDarkMode {
    color: var(--darkmode-text-color) !important;
  }
}

@media screen and (max-width: 767px) {
  .darkMode .headerNewDesign .homeMobileMenu {
    background-color: var(--darkmode-primary-color);
  }
}

@media screen and (max-width: 767px) {
  .darkMode .headerNewDesign .navbar-default .navbar-nav,
  .darkMode .headerNewDesign .navbar-default .navbar-nav > li {
    background: var(--darkmode-primary-color);
  }

  .darkMode .footerBannerImg {
    background-color: var(--darkmode-secondary-color) !important;
  }
}