@import url('./variables.css');

body.lightMode {
  background-color: #fff;
}

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

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

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

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

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

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

.darkMode .mainMenu .navbar-nav .themeIconDropDown .dropdown-menu a {
  color: var(--darkmode-text-color) !important;
}

.darkMode .mainMenu .navbar-nav .themeIconDropDown .dropdown-menu a:hover {
  background-color: transparent !important;
}

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

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

.darkMode .navigationLinkDark a:hover,
.darkMode .navigationLinkDark a:active,
.navigationLinkDark a:focus {
  border-bottom: 2px solid var(--darkmode-text-color) !important;
}

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

.darkMode .mainMenu .navbar-nav .themeIconDropDown .dropdown-menu a:nth-child(2) {
  border-bottom: 2px solid transparent !important;
}

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

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

.darkMode .form-control,
.darkMode .form-control:focus {
  color: var(--darkmode-text-color);
  background-color: transparent;
  border: 1px solid #e0e0c6 !important;
}

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

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

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

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

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

.darkMode ::placeholder {
  color: #f6f6f699;
  opacity: 1;

  /* Firefox */
}

.darkMode :-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #f6f6f699;
}

.darkMode ::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #f6f6f699;
}

.darkMode select,
.darkMode select:focus {
  background-image: url('../Icons/selectArrowDark.svg') !important;
  color: var(--btn-text-color) !important;
  border: 1px solid var(--admin-border-color) !important;
}

.darkMode .tableSticky .table thead th {
  background: var(--darkmode-secondary-color) !important;
  color: var(--darkmode-text-color);
}

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

.darkMode .adminModal .modal-title {
  color: var(--darkmode-text-color) !important;
}

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

.darkMode .adminThemeHeader .dropdown-menu {
  background: var(--darkmode-secondary-color);
}

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

.darkMode .adminThemeHeader .dropdown-item:active {
  background-color: transparent !important;
  color: var(--darkmode-text-color);
}

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

.darkMode select option {
  color: #000 !important;
}

.darkMode .whiteDropdown select option {
  color: #fff !important;
}

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

.darkMode .rc-pagination-prev a::after,
.darkMode .rc-pagination-next a::after {
  margin-top: -3px;
  color: var(--darkmode-text-color);
}

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

.darkMode .jobDetailAccordion .card-header {
  background: var(--darkmode-secondary-color);
}

.darkMode .jobDetailAccordion .card-header button {
  color: var(--darkmode-text-color);
}

.darkMode .jobDetailAccordion .card {
  background: transparent;
}

.darkMode .bookingAccordion .btn-link {
  color: var(--darkmode-text-secondary-color) !important;
}

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

.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 .ql-snow .ql-fill,
.darkMode .ql-snow .ql-stroke.ql-fill {
  fill: var(--darkmode-text-color) !important;
}

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

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

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

.darkMode .ql-container {
  background: transparent !important;
}

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

.darkMode .darkLink,
.darkMode .darkLink:hover {
  color: var(--darkmode-link-color) !important;
}

.darkMode .phoneColor input {
  border: 1px solid #e0e0c6 !important;
  background-color: var(--darkmode-secondary-color) !important;
}

.darkMode .form-control:disabled {
  background-color: #6d6f71 !important;
}

.darkMode .navigationLinkDark .themeIconDropDown a:hover,
.darkMode .navigationLinkDark .themeIconDropDown a:active,
.navigationLinkDark .themeIconDropDown a:focus {
  border-bottom: 2px solid transparent !important;
}

.darkMode .bgBannerDark {
  position: relative;
}

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

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


.darkMode .backGroungImgDark {
  position: relative;
}

.darkMode .backGroungImgDark::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #171d37 0%, #171d3784 100%);
}

.darkMode a {
  color: var(--darkmode-link-color);
}

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

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

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

.darkMode .searchInputRTL .form-control,
.darkMode .assignSearchInputRTL .form-control {
  background-color: transparent !important;
}

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

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


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

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

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

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

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

.darkMode .dv-star-rating .dv-star-rating-empty-star {
  color: rgb(118, 118, 118) !important;
}

.darkMode .dv-star-rating .dv-star-rating-full-star {
  color: rgb(223, 163, 42) !important;
}

.darkMode .btnBorderWhte,
.darkMode .btnBorderWhte:hover,
.darkMode .btnBorderWhte:focus,
.darkMode .btnBorderWhte:active:focus,
.darkMode .btnBorderWhte:active:hover {
  border-bottom: 1px solid var(--darkmode-text-secondary-color) !important;
  color: var(--darkmode-text-color) !important;
}

.darkMode .darkModeExportTextContainer {
  border-bottom: 1px solid var(--darkmode-text-color);
}

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

.darkMode .darkModeAccordionHeading .accordionArrow img {
  filter: invert(87%) sepia(15%) saturate(313%) hue-rotate(174deg) brightness(99%) contrast(86%);
}

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

.darkMode .darkModeCommonSwitchContainer {
  background: var(--darkmode-bg);
}

.darkMode .commonBookingSwitchContainer span:first-child,
.darkMode .commonBookingSwitchContainer span:last-child {
  color: var(--darkmode-text-color) !important;
}

.darkMode .subCategorySliderItemWrapper {
  background: var(--darkmode-bg);
}

.darkMode .subCategoryInfoSubHeading,
.darkMode .subCategoryInfoHeading {
  color: var(--darkmode-text-color);
}

.darkMode .guideBookPhoneInput .react-tel-input input[type="text"],
.darkMode .guideBookPhoneInput .react-tel-input input[type="tel"] {
  background: var(--darkmode-primary-color) !important;
  color: var(--darkmode-text-color) !important;
}

.darkMode .guideBookPhoneInput .react-tel-input .flag-dropdown {
  background-color: var(--darkmode-primary-color) !important;
}

.darkMode .guideBookPhoneInput .react-tel-input .flag-dropdown .selected-flag,
.darkMode .guideBookPhoneInput .react-tel-input .flag-dropdown:hover .selected-flag,
.darkMode .guideBookPhoneInput .react-tel-input .flag-dropdown:focus .selected-flag {
  background-color: var(--darkmode-primary-color) !important;
}

.darkMode .guideBookPhoneInput .react-tel-input .country-list {
  background-color: var(--darkmode-primary-color) !important;
}

.darkMode .guideBookPhoneInput .react-tel-input .country-list .country:hover,
.darkMode .guideBookPhoneInput .react-tel-input .country-list .country.highlight {
  background-color: var(--darkmode-secondary-color) !important;
}

.darkMode .guideBookPhoneInput .react-tel-input .country-list .country .dial-code {
  color: var(--darkmode-text-secondary-color) !important;
}

.darkMode .guideBookPhoneInput .react-tel-input .selected-flag .arrow {
  filter: invert(90%) sepia(7%) saturate(922%) hue-rotate(182deg) brightness(93%) contrast(98%);
}

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

.darkMode .guideBookPhoneInput .react-tel-input input[type="text"]:disabled,
.darkMode .guideBookPhoneInput .react-tel-input input[type="tel"]:disabled {
  background: var(--disabled-bg) !important;
}

.darkMode .guideBookPhoneInput .react-tel-input input[type="text"]:disabled+.flag-dropdown {
  background-color: var(--disabled-bg) !important;
}

.darkMode .guideBookPhoneInput .react-tel-input input[type="text"]:disabled+.flag-dropdown .selected-flag,
.darkMode .guideBookPhoneInput .react-tel-input input[type="text"]:disabled+.flag-dropdown:hover .selected-flag,
.darkMode .guideBookPhoneInput .react-tel-input input[type="text"]:disabled+.flag-dropdown:focus .selected-flag,
.darkMode .guideBookPhoneInput .react-tel-input input[type="tel"]:disabled+.flag-dropdown .selected-flag,
.darkMode .guideBookPhoneInput .react-tel-input input[type="tel"]:disabled+.flag-dropdown:hover .selected-flag,
.darkMode .guideBookPhoneInput .react-tel-input input[type="tel"]:disabled+.flag-dropdown:focus .selected-flag {
  background: var(--disabled-bg) !important;
}

.darkMode .commonSubCategoryPricingAccordionHeading,
.darkMode .commonSubCategoryPricingAccordionHeading:hover,
.darkMode .commonSubCategoryPricingAccordionHeading:focus {
  color: var(--darkmode-text-color);
}

.darkMode .commonSubCategoryPricingSubHeading,
.darkMode .commonSubCategoryPricingHeading,
.darkMode .commonSubCategorySliderHeadin,
.darkMode .commonSubCategorySliderHeading,
.darkMode .commonProviderHeading {
  color: var(--darkmode-text-color);
}

.darkMode .commonSubCategoryPricingSubHeading .accordionArrow img {
  filter: invert(87%) sepia(15%) saturate(313%) hue-rotate(174deg) brightness(99%) contrast(86%);
}

.darkMode .actionLinkText {
  color: var(--darkmode-link-color);
}

.darkMode .actionLinkText:hover,
.darkMode .actionLinkText:focus,
.darkMode .actionLinkText:active {
  color: var(--darkmode-link-color);
}

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

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

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

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

.darkMode .SingleDatePickerInput_clearDate,
.darkMode .SingleDatePickerInput_clearDate:focus,
.darkMode .SingleDatePickerInput_clearDate:hover {
  background-color: transparent !important;
  border-color: transparent !important;
}

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

.darkMode .darkModeAddOrChangeBtn {
  color: var(--darkmode-link-color) !important;
}

.darkMode .preferredProviderDefaultImgContainer {
  background: var(--darkmode-bg);
}

.darkMode .CalendarDay__default:hover {
  color: #484848 !important;
}

.darkMode .CalendarDay__blocked_out_of_range:active,
.darkMode .CalendarDay__blocked_out_of_range:hover {
  color: #cacccd !important;
}

.darkMode .CalendarDay__blocked_calendar,
.darkMode .CalendarDay__blocked_calendar:active,
.darkMode .CalendarDay__blocked_calendar:hover {
  color: #82888a !important;
}

.darkMode .CalendarDay__selected:active,
.darkMode .CalendarDay__selected:hover {
  color: #fff !important;
}

.darkMode .manualGeoSuggestListWrapper::after {
  background-image: url(../darkPowered_by_google.png);
}

@media (min-width: 768px) {
  .darkMode .scheduleBookingTimeContainer select:focus {
    border-color: var(--admin-border-color) !important;
  }

  .darkMode .scheduleBookingTimeContainer select:first-child {
    border-right: 0 !important;
  }

  .darkMode .scheduleBookingTimeContainer select:last-child {
    border-left: 0 !important;
  }

  .darkMode.rtl .scheduleBookingTimeContainer select:last-child {
    border-right: 0 !important;
    border-left: 1px solid var(--admin-border-color) !important;
  }

  .darkMode.rtl .scheduleBookingTimeContainer select:first-child {
    border-left: 0 !important;
    border-right: 1px solid var(--admin-border-color) !important;
  }
}