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

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

.darkMode .svgImg img {
    filter: invert(100%) sepia(8%) saturate(20%) hue-rotate(248deg) brightness(110%) contrast(93%);
}

.darkMode .modal-content {
    box-shadow: 0px 4px 19px 0px #494950 !important;
}

.darkMode .svgImg use {
    filter: invert(100%) sepia(8%) saturate(20%) hue-rotate(248deg) brightness(110%) contrast(93%);
}

.darkMode ::placeholder {
    color: var(--primary-placeholder-foreground);
    opacity: 1;
    /* Firefox */
}

.darkMode :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: var(--primary-placeholder-foreground);
}

.darkMode ::-ms-input-placeholder {
    /* Microsoft Edge */
    color: var(--primary-placeholder-foreground);
}

.darkMode select {
    background-image: url('../Icons/selectArrowDark.svg') !important;
}

.darkMode .rc-pagination-item {
    background: transparent;
}

.darkMode .bookingCollapse .Collapsible__trigger.is-open:after {
    filter: invert(100%) sepia(8%) saturate(20%) hue-rotate(248deg) brightness(110%) contrast(93%);
}

.darkMode .bookingCollapse .Collapsible__trigger:after {
    filter: invert(100%) sepia(8%) saturate(20%) hue-rotate(248deg) brightness(110%) contrast(93%);
}

.darkMode .form-control:disabled {
    background-color: var(--primary-disable) !important;
}

.darkMode .Loader__background {
    background-color: #0e142fcc !important;
}

.darkMode .lightModeLoader {
    display: none;
}

.darkMode .darkModeLoader {
    display: inline-block;
}

.darkMode .backGroungImgDark {
    position: relative;
}

.darkMode .geosuggest__item:hover,
.darkMode .geosuggest__item:focus {
    background: var(--common-hover-bg);
}

.darkMode .rc-pagination-prev button {
    filter: invert(100%) sepia(1%) saturate(7500%) hue-rotate(265deg) brightness(100%) contrast(106%);
}

.darkMode .rc-pagination-next button {
    filter: invert(100%) sepia(1%) saturate(7500%) hue-rotate(265deg) brightness(100%) contrast(106%);
}

.darkMode .dv-star-rating-full-star {
    color: var(--common-star-icon-bg) !important;
}

.darkMode .defaultProfileIcon,
.darkMode .darkModeDefaultImg {
    filter: invert(100%) sepia(8%) saturate(20%) hue-rotate(248deg) brightness(110%) contrast(93%);
}

.darkMode .topCategorySliderListItem:hover .topCategorySliderListCommonImg img {
    box-shadow: 0px 6px 14px 0px #fffbfb1c;
}


/* phone number input start */


.darkMode .guideBookPhoneInput .react-tel-input .selected-flag .arrow {
    filter: invert(91%) sepia(95%) saturate(47%) hue-rotate(196deg) brightness(100%) contrast(85%);
}

.darkMode.rtl .guideBookPhoneInput .react-tel-input .selected-flag,
.darkMode.rtl .guideBookPhoneInput .react-tel-input .flag-dropdown:hover .selected-flag,
.darkMode.rtl .guideBookPhoneInput .react-tel-input .flag-dropdown:focus .selected-flag {
    border-right: unset !important;
    border-left: 1px solid var(--primary-border) !important;
}

/* phone number input end */

.darkMode .buttonGroupDivider {
    border-top: 1px solid var(--primary-border) !important;
}

.darkMode .darkModeReviewYourRequestContainer {
    box-shadow: 0px -1px 16px 0px #ffffff0f;
}

.darkMode .commonLinkIcon img {
    filter: invert(48%) sepia(20%) saturate(7121%) hue-rotate(164deg) brightness(91%) contrast(103%);
}

.darkMode .darkModeProfileCardWrapper {
    box-shadow: 0px 14px 40px 0px #313446;
}

.darkMode .darkModeSvgImg {
    filter: invert(100%) sepia(8%) saturate(20%) hue-rotate(248deg) brightness(110%) contrast(93%);
}

.darkMode .svgIconImg img {
    filter: invert(48%) sepia(85%) saturate(2357%) hue-rotate(161deg) brightness(89%) contrast(101%);
}

.darkMode .paymentDropdownContainer .dropdown-toggle {
    background-image: url(../Icons/darkModePaymentDropdownDownArrow.svg);
}

.darkMode .paymentDropdownContainer.show .dropdown-toggle {
    background-image: url(../Icons/darkModePaymentDropdownUpArrow.svg);
}

.darkMode .paymentDropdownContainerReadonly .dropdown-toggle,
.darkMode .paymentDropdownContainerReadonly.show .dropdown-toggle {
    background-image: none;
}

.darkMode .flatpickr-current-month select {
    background-image: inherit !important;
}

.darkMode .viewCategoryLocationHourlySearch .customGeoSuggestInputContainer,
.darkMode .viewCategoryLocationHourlySearch .safariFailureInputWrapper {
    background-image: url(../Icons/locationPinDarkIcon.svg);
}

.darkMode .customGeoSuggestInputListContainer::after {
    background-image: url(../Icons/darkPoweredByGoogle.png);
}

.darkMode .customizeRadioBtn:checked:before,
.darkMode .customizeRadioSmallBtn:checked:before {
    background-image: url(../darkRadioBoxChecked.svg);
}