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

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

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

.darkMode ::-moz-selection {
    /* Code for Firefox */
    background: #3f5b9d !important;
}

.darkMode ::selection {
    background: #3f5b9d !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 .darkFooterConent ul li a {
    color: var(--darkmode-text-color);
}

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

.darkMode .darkheroBkgAnimated {
    background: url('../static/footerDarkMode.svg') repeat-x !important;
    width: auto;
    margin: 0;
    min-height: 420px;
    padding-top: 10%;
    box-sizing: border-box;
    position: relative;
    background-position: top center;
    background-size: cover !important;
}

.darkMode .aboutBgTwoDark {
    background: inherit !important;
}

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

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

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

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

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

.darkMode select {
    color: var(--darkmode-text-color) !important;
    background-image: url('../Icons/selectArrowDark.svg') !important;
    background-repeat: no-repeat;
}

.darkMode .audioSectionDark {
    border-color: #ced4da !important;
}

.darkMode .toneDarkMode {
    background: transparent !important;
    color: var(--darkmode-text-color) !important;
    border-color: #ced4da !important;
}

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

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

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

.darkMode .NewResponsiveTable table tbody tr {
    background-color: var(--darkmode-secondary-color);
    color: var(--darkmode-text-color);
}

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

.darkMode .modal-content .close {
    color: var(--darkmode-text-color) !important;
    text-shadow: inherit;
    opacity: .9;
}

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

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

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

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

.darkMode .react-tel-input .selected-flag .arrow {
    border-top: 4px solid var(--darkmode-text-color);
}

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

.darkMode .manualGeoSuggestWrapper {
    background: var(--darkmode-secondary-color);
}
.darkMode .manualGeoSuggestWrapper .geoSuggestItem:hover, 
.darkMode .manualGeoSuggestWrapper .geoSuggestItem:focus {
    background: var(--darkmode-primary-color);
}

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

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

.darkMode .gmnoprint div:first-child {
    background-color: var(--darkmode-primary-color) !important;
}

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

.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_svg {
    fill: var(--darkmode-text-color);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.darkMode .customRatioButton input[type=radio]:checked:before {
    background: url('../Icons/dotOnlyDark.svg');
}

.darkMode .customRatioButton input[type=checkbox],
.darkMode .customRatioButton input[type=radio] {
    background: url('../Icons/circleOnlyDark.svg') no-repeat;
}

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

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

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

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

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

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

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

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

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

.darkMode .whiteDropdown select option {
    color: var(--darkmode-text-color) !important;
}

.darkMode .customFlatpickr .flatpickr-input {
    background: var(--darkmode-primary-color);
    color: var(--darkmode-text-color);
    padding-top: 0;
}

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

.darkMode .flatpickr-months .flatpickr-month {
    background: var(--darkmode-secondary-color);
    color: var(--darkmode-text-color);
}

.darkMode span.flatpickr-weekday {
    background: var(--darkmode-secondary-color);
    color: var(--darkmode-text-color);
}

.darkMode .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--darkmode-secondary-color);
    background-image: inherit !important;
}

.darkMode .flatpickr-months .flatpickr-prev-month svg,
.darkMode .flatpickr-months .flatpickr-next-month svg {
    fill: var(--darkmode-text-color);
}

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

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

.darkMode .flatpickr-day.flatpickr-disabled,
.darkMode .flatpickr-day.flatpickr-disabled:hover {
    color: #888;
}

.darkMode .flatpickr-time {
    background: var(--darkmode-secondary-color);

}

.darkMode .flatpickr-time input {
    color: var(--darkmode-text-color);
}

.darkMode .flatpickr-time .flatpickr-time-separator,
.darkMode .flatpickr-time .flatpickr-am-pm {
    color: var(--darkmode-text-color);
}

.darkMode .flatpickr-time input:hover,
.darkMode .flatpickr-time .flatpickr-am-pm:hover,
.darkMode .flatpickr-time input:focus,
.darkMode .flatpickr-time .flatpickr-am-pm:focus {
    background: var(--darkmode-secondary-color);
}

.darkMode .flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color: var(--darkmode-text-color);
}

.darkMode .flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--darkmode-text-color);
}

.darkMode .flatpickr-calendar.arrowTop:before {
    border-bottom-color: var(--darkmode-primary-color);
}

.darkMode .flatpickr-day.inRange,
.darkMode .flatpickr-day.prevMonthDay.inRange,
.darkMode .flatpickr-day.nextMonthDay.inRange,
.darkMode .flatpickr-day.today.inRange,
.darkMode .flatpickr-day.prevMonthDay.today.inRange,
.darkMode .flatpickr-day.nextMonthDay.today.inRange,
.darkMode .flatpickr-day:hover,
.darkMode .flatpickr-day.prevMonthDay:hover,
.darkMode .flatpickr-day.nextMonthDay:hover,
.darkMode .flatpickr-day:focus,
.darkMode .flatpickr-day.prevMonthDay:focus,
.darkMode .flatpickr-day.nextMonthDay:focus {
    background: var(--darkmode-secondary-color);
}

.darkMode .flatpickr-months .flatpickr-prev-month:hover svg,
.darkMode .flatpickr-months .flatpickr-next-month:hover svg {
    fill: 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 .rc-pagination-item {
    background: transparent;
}

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

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

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

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

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

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

.darkMode .carBgDark {
    position: relative;
}

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

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

.darkMode .inputFormAddon .input-group-text {
    border: 1px solid #ced4da !important;
}

.darkMode .Loader__background {
    background-color: rgb(23 29 55 / 74%) !important;
}

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

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

.darkMode .rc-pagination-item-active {
    background-color: var(--darkmode-primary-color) !important;
    border-color: var(--darkmode-primary-color) !important;
    font-weight: 700 !important;
}

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

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

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

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

.darkMode .aboutBgOneDark {
    background-image: url('../static/staticImageDark.svg') !important;
}

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

.darkMode .sideMenuScroll a:hover,
.darkMode .sideMenuScroll a:focus {
    background-color: #0c0623;
}

.darkMode .darkBtnHover:hover,
.darkMode .darkBtnHover:focus {
    background-color: #0c0623;
}

.darkMode .closeBookingModalTabs .nav-tabs .nav-link.active {
    color: var(--darkmode-text-color);
    background: transparent;
}

.darkMode .closeBookingModalTabs .nav-tabs .nav-link.active::after {
    background-color: var(--darkmode-link-color);
}

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

.darkMode .inputFormAddon .input-group-text {
    background-color: #0c0623 !important;
}

.darkMode .sideMenuScroll::-webkit-scrollbar-thumb {
    background: var(--darkmode-link-color) !important;
}

.darkMode .tableCss::-webkit-scrollbar-thumb {
    background: var(--darkmode-link-color) !important;
}

.darkMode .exportDark {
    filter: invert(58%) sepia(11%) saturate(2157%) hue-rotate(186deg) brightness(103%) contrast(102%);
}

.darkMode .hoverHideDark::after {
    border-color: var(--darkmode-text-color) transparent transparent transparent;
}

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

.darkMode button,
.darkMode button:hover,
.darkMode button:focus {
    background-color: var(--btn-text-color) !important;
    border-color: var(--btn-text-color) !important;
    color: var(--btn-primary-bg) !important;
    padding: 12px 20px;
}

.darkMode .btnPrimaryDark,
.darkMode .btnPrimaryDark:hover,
.darkMode .btnPrimaryDark:focus {
    background-color: var(--btn-text-color) !important;
    border-color: var(--btn-text-color) !important;
    color: var(--btn-primary-bg) !important;
}

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

.darkMode .modal-content button.close {
    background-color: transparent !important;
    padding: 16px;
}

.darkMode .btnPrimaryDeleteDark,
.darkMode .btnPrimaryDeleteDark:hover,
.darkMode .btnPrimaryDeleteDark:focus {
    background: transparent !important;
    color: var(--darkmode-link-color) !important;
    text-decoration: none !important;
    padding: 0;
}

.darkMode .ql-snow.ql-toolbar button {
    background: transparent !important;
    text-decoration: none !important;
}

.darkMode .ql-snow.ql-toolbar button:hover,
.darkMode .ql-snow.ql-toolbar button:focus {
    background: transparent !important;
    color: var(--darkmode-link-color) !important;
    text-decoration: none !important;
    padding: 3px 5px !important;
}

.darkMode .pageUrlInput .input-group-text {
    background-color: var(--btn-text-color) !important;
    border-color: var(--btn-text-color) !important;
    color: var(--btn-primary-bg) !important;
}

.darkMode .flatpickr-current-month input.cur-year[disabled],
.darkMode .flatpickr-current-month input.cur-year[disabled]:hover {
    color: var(--darkmode-text-color);
}

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

}

.darkMode .boxShadowDark {
    box-shadow: 0 0px 16px -5px #749eff;
}

.darkMode .CalendarDay__blocked_out_of_range {
    color: #cacccdc2 !important;
}

.darkMode .form-control:focus {
    border-color: var(--darkmode-link-color) !important;
    background: transparent;
}

.darkMode textarea.form-control:focus {
    border-color: var(--darkmode-link-color) !important;
}

.darkMode select:focus {
    border-color: var(--darkmode-link-color) !important;
}

.darkMode .react-tel-input .form-control {
    background-color: transparent;
}

.darkMode .bookingCollapse .Collapsible__trigger:after {
    filter: invert(99%) sepia(0%) saturate(0%) hue-rotate(61deg) brightness(115%) contrast(100%);
}

.darkMode .manageSearchLocation .form-control {
    background: transparent;
}

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

.darkMode .mapSection .link,
.darkMode .mapSection .link:hover {
    color: var(--common-text-color) !important;
    padding: 6px 12px;
}

.darkMode .bookingCollapse .Collapsible__trigger {
    border-top: 1px solid #dee2e6;
}

.darkMode .faqDarkMode {
    filter: invert(100%) sepia(1%) saturate(0%) hue-rotate(160deg) brightness(102%) contrast(101%);
}

.darkMode .popover {
    background: var(--darkmode-secondary-color) 0% 0% no-repeat padding-box !important;
    text-align: center !important;
}

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

.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.bs-popover-top>.arrow::after,
.darkMode .imageUploadTooltipContainer.bs-popover-top>.arrow::before {
    border-top-color: var(--common-darkModeTooltip-color) !important;
}

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

.darkMode .manageSearchLocation button,
.darkMode .manageSearchLocation button:hover,
.darkMode .manageSearchLocation button:focus {
    background-color: var(--common-color) !important;
    border-color: var(--common-color) !important;
    color: var(--btn-primary-bg) !important;
    padding: 12px 20px;
    outline: unset;
    box-shadow: unset;
}

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

.darkMode .calendarIcon {
    background-color: var(--btn-primary-bg);
    padding: 0 !important;
}

.darkMode .darkClockBtn {
    padding: 0 !important;
}

@media screen and (max-width:1200px) {
    .darkMode .textWhiteMob {
        color: var(--darkmode-text-color);
    }
}