@import './variables.css';

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

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

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

.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,
.darkMode .navigationLinkDark a:focus,
.darkMode .navigationLinkDark a:hover {
    color: var(--darkmode-text-color) !important;
}

.darkMode .navigationLinkDark a:hover:after,
.darkMode .navigationLinkDark a:active:after,
.darkMode .navigationLinkDark a:focus:after {
    content: '';
    position: absolute;
    width: 27px;
    height: 1px;
    background-color: var(--darkmode-text-color);
    bottom: 7px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.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 {
    color: var(--darkmode-text-color);
    background-color: transparent !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 {
    background-image: url('../Icons/selectArrowDark.svg') !important;
    color: var(--admin-border-color);
}

.darkMode .formControlInput:focus {
    border-color: var(--white-text-color) !important;
    outline: 0 !important;
    box-shadow: none;
}

.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: var(--admin-text-color) !important;
}

.darkMode .whiteDropdown select option {
    color: var(--white-text-color) !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);
}

.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(--common-link-color) !important;
}

.darkMode .phoneColor input {
    border: 1px solid var(--admin-border-color) !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,
.darkMode .navigationLinkDark .themeIconDropDown a:focus {
    border-bottom: 2px solid transparent !important;
}

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


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

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

.darkMode .lightModeLoader {
    display: none;
}

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

.darkMode .backGroungImgDark {
    position: relative;
}

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

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

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

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

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

.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(--btn-primary-bg) !important;
}

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

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

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

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

@media screen and (max-width: 1199px) {
    .darkMode .homeNav .navbar-expand-lg .navbar-collapse {
        background-color: var(--darkmode-secondary-color) !important;
    }

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

    .darkMode .navigationLinkDark a:hover:after,
    .darkMode .navigationLinkDark a:active:after,
    .darkMode .navigationLinkDark a:focus:after {
        margin: 0px 20px;
    }
}