/* ------ variables */

html[data-theme="dark"] {
    --dropdown-icon-bg: #f0f0f0;
    --text-secondary-dark: #212529;
    --primary-color-pale: #b36e49;
    --primary-color-light: #db9574;
    --header-icon-color: #444;
    --orange-text-color: #fd5631; /* fd5631 */
    --primary-link-color: #97aaca;
}

/* ------ layout */

/*
html[data-theme="dark"] #titlebar {
    background-color: var(--header-bg) !important;
}
*/

html[data-theme="dark"] span:not(.overview-value):not(.bookmark-icon).badge.bg-warning {
    color: var(--text-secondary-dark) !important;
}

html[data-theme="dark"] .badge-success {
    background-color: #28a745 !important;
}

html[data-theme="dark"] a:not(.button) {
    color: var(--primary-color) !important;
}

html[data-theme="dark"] a:not(.button):hover {
    color: var(--primary-hover) !important;
}

html[data-theme="dark"] a.btn-outline-secondary:not(.button) {
    color: var(--text-color) !important;
}

html[data-theme="dark"] a.text-dark,
html[data-theme="dark"] a.text-dark:hover {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .dashboard-content-inner .dashboard-content-inner {
    /* background-color: var(--surface-color) !important; */
    background-color: var(--background-color) !important;
}

html[data-theme="dark"] a:not(.button).button.button-primary,
html[data-theme="dark"] a:not(.button).btn-primary,
html[data-theme="dark"] a:not(.button).btn-danger {
    color: var(--text-color) !important;
}

html[data-theme="dark"] h5.categorytitle {
    color: var(--orange-text-color) !important;
}

html[data-theme="dark"] #calendar_dashboard table tr:hover td {
    background-color: transparent !important;
}

html[data-theme="dark"] .dashboard-box .content table tr:hover td .button:hover:not(.button-sliding-icon):not(.with-icon):not(.button-grey) {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .pagination {
    background-color: transparent !important;
}

html[data-theme="dark"] .dashboard-status-button.red {
    background-color: rgba(255, 91, 91, 0.3) !important;
}

html[data-theme="dark"] .dashboard-status-button.blue,
html[data-theme="dark"] span.dashboard-status-button.blue:not(.badge):not(.label):not(.overview-value) {
    color: #265296 !important;
}

html[data-theme="dark"] .error-color,
html[data-theme="dark"] p.error-color,
html[data-theme="dark"] span.error-color,
html[data-theme="dark"] span.error-color:not(.badge):not(.label):not(.overview-value),
html[data-theme="dark"] div.error-color:not(.overview-value):not(.bookmark-icon) {
    color: var(--danger-color) !important;
}

html[data-theme="dark"] .mm-menu {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .mm-panel.mm-hasnavbar .mm-navbar {
    background-color: var(--background-color) !important;
}

/* ------ components */

html[data-theme="dark"] .attachment-box {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .attachment-box:before {
    border-color: #00000026 var(--surface-color) !important;
}

html[data-theme="dark"] .freelancers-container,
html[data-theme="dark"] .freelancers-container:hover {
    background-color: transparent !important;
}

html[data-theme="dark"] .tox .tox-tbtn:hover svg {
    fill: var(--primary-color-light) !important;
}

@media (max-width: 768px) {
    html[data-theme="dark"] .header-widget .log-in-button {
        background-color: var(--surface-hover) !important;
    }

    html[data-theme="dark"] .header-widget .log-in-button i,
    html[data-theme="dark"] .header-widget .log-in-button i:hover {
        color: var(--text-muted) !important;
    }
}

html[data-theme="dark"] .sidebar-container .job-overview-headline {
    background: var(--surface-secondary) !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: var(--primary-color-pale) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] #header {
    box-shadow: 0 0 18px 0 var(--background-color) !important;
}

html[data-theme="dark"] #header #logo img,
html[data-theme="dark"] #header #logo a:hover img {
    transform: translate3d(0, -50%, 0) !important;
}

html[data-theme="dark"] .mb-3,
html[data-theme="dark"] .my-3,
html[data-theme="dark"] .m-3 {
    background-color: transparent !important;
    /* border-color: transparent !important; */
}

html[data-theme="dark"] .sidebar-container .sidebar-widget h3,
html[data-theme="dark"] .sidebar-container .job-overview-headline,
html[data-theme="dark"] .sidebar-container .freelancer-overview-headline,
html[data-theme="dark"] .sidebar-container .service-overview-headline {
    border-bottom: none !important;
}

/*
html[data-theme="dark"] ul:not(.nav):not(.dropdown-menu),
html[data-theme="dark"] .list-unstyled,
html[data-theme="dark"] .list-group {
    background-color: transparent !important;
}
*/

html[data-theme="dark"] .dashboard-job-candidates-manage ul.dashboard-task-info:not(.nav):not(.dropdown-menu),
html[data-theme="dark"] .dashboard-job-candidates-manage ul.dashboard-task-info li:not(.nav-item):not(.dropdown-item) {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] ul.dashboard-task-info:not(.nav):not(.dropdown-menu),
html[data-theme="dark"] ul.dashboard-task-info li:not(.nav):not(.dropdown-menu) {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] ul.dashboard-task-info li:not(.nav):not(.dropdown-menu) {
    border-right-color: var(--surface-color) !important;
}

html[data-theme="dark"] .dashboard-task-info-transparent,
html[data-theme="dark"] ul.dashboard-task-info-transparent,
html[data-theme="dark"] .dashboard-task-info-transparent li,
html[data-theme="dark"] ul.dashboard-task-info-transparent:not(.nav):not(.dropdown-menu),
html[data-theme="dark"] ul.dashboard-task-info-transparent li:not(.nav):not(.dropdown-menu) {
    background-color: transparent !important;
}

html[data-theme="dark"] .job-listing .job-listing-footer ul:not(.nav):not(.dropdown-menu),
html[data-theme="dark"] .job-listing .job-listing-footer ul li:not(.nav-item):not(.dropdown-item) {
    background-color: transparent !important;
}

html[data-theme="dark"] .pagination ul:not(.nav):not(.dropdown-menu),
html[data-theme="dark"] .freelancer-details-list ul:not(.nav):not(.dropdown-menu),
html[data-theme="dark"] .freelancer-details-list ul li:not(.nav-item):not(.dropdown-item),
html[data-theme="dark"] .hot-jobs-content ul:not(.nav):not(.dropdown-menu),
html[data-theme="dark"] .hot-jobs-content ul li:not(.nav-item):not(.dropdown-item) {
    background-color: transparent !important;
}

html[data-theme="dark"] ul:not(.nav):not(.dropdown-menu).slick-dots {
    background-color: transparent !important;
}

html[data-theme="dark"] ul:not(.nav):not(.dropdown-menu).popup-tabs-nav {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .dashboard-box .headline h3 i {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .submit-field input[type="text"], html[data-theme="dark"] .submit-field input[type="number"], html[data-theme="dark"] .submit-field input[type="password"], html[data-theme="dark"] .submit-field input[type="email"], html[data-theme="dark"] .submit-field textarea, html[data-theme="dark"] .submit-field select {
    background: var(--input-bg) !important;
}

html[data-theme="dark"] .submit-field input[type="text"],
html[data-theme="dark"] .submit-field input[type="number"],
html[data-theme="dark"] .submit-field input[type="password"],
html[data-theme="dark"] .submit-field input[type="email"],
html[data-theme="dark"] .submit-field textarea,
html[data-theme="dark"] .submit-field select {
    border-color: var(--input-border) !important;
}

html[data-theme="dark"] input:checked + .switch-button {
    background-color: var(--primary-color-light) !important;
}

html[data-theme="dark"] .keyword-input {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
}

html[data-theme="dark"] .list-style-one li:before {
    color: var(--primary-color-light) !important;
}

html[data-theme="dark"] .list-2 li:before {
    color: var(--primary-color-light) !important;
}

html[data-theme="dark"] .sidebar-widget-order-actions {
    background-color: transparent !important;
}

html[data-theme="dark"] .sidebar-widget-order-actions .button {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .sidebar-widget-order-actions .button:hover {
    background-color: var(--surface-hover) !important;
}

html[data-theme="dark"] .sidebar-widget-order-actions .button.complete {
    background-color: var(--primary-color) !important;
}

/* --- new BEGIN */

html[data-theme="dark"] #logo {
    border-color: transparent !important;
}

html[data-theme="dark"] #navigation ul li a:after {
    background: transparent !important;
}

html[data-theme="dark"] #navigation ul ul.dropdown-nav ul.dropdown-nav li:hover a:after,
html[data-theme="dark"] #navigation ul ul.dropdown-nav li:hover a:after,
html[data-theme="dark"] #navigation ul li:hover a:after {
    background: var(--dropdown-icon-bg) !important;
}

html[data-theme="dark"] .dashboard-nav ul li a:after {
    background-color: var(--surface-hover) !important;
}

html[data-theme="dark"] .dashboard-nav ul li.active-submenu a:after,
html[data-theme="dark"] .dashboard-nav ul li.active a:after,
html[data-theme="dark"] .dashboard-nav ul li:hover a:after {
    background: var(--dropdown-icon-bg) !important;
}

html[data-theme="dark"] #wrapper .dashboard-nav-container > .dashboard-nav {
    border-right: none !important;
}

html[data-theme="dark"] .share-buttons-trigger {
    background-color: var(--modal-bg) !important;
}

/*
html[data-theme="dark"] .bookmark-button {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
}

html[data-theme="dark"] .bookmark-button {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
}
*/

html[data-theme="dark"] .bookmark-icon {
    background-color: var(--background-color) !important;
}

html[data-theme="dark"] .bookmark-icon:hover {
    background-color: var(--sidebar-hover) !important;
}

html[data-theme="dark"] .bookmark-icon.bookmarked {
    background-color: #df8d11 !important;
}

html[data-theme="dark"] .bookmark-icon.bookmarked:hover {
    background-color: #feb342 !important;
}

html[data-theme="dark"] .bookmark-button.bookmarked .bookmark-icon,
html[data-theme="dark"] .bookmark-button.bookmarked:hover .bookmark-icon {
    background-color: #ffffff29 !important;
}

html[data-theme="dark"] .header-details ul:not(.nav):not(.dropdown-menu),
html[data-theme="dark"] ul:not(.nav):not(.dropdown-menu).boxed-list-ul {
    background-color: transparent !important;
}

html[data-theme="dark"] .boxed-list-headline {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .single-page-section ul:not(.nav):not(.dropdown-menu),
html[data-theme="dark"] .single-page-section ul li:not(.nav-item):not(.dropdown-item) {
    background-color: transparent !important;
}

html[data-theme="dark"] .input-with-icon-left i {
    background-color: transparent;
    border-color: var(--primary-color-pale);
}

html[data-theme="dark"] .social-login-separator span {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] #sign-in-dialog.dialog-with-tabs .mfp-close {
    background-color: var(--surface-secondary) !important;
}

/*
html[data-theme="dark"] .form .button,
html[data-theme="dark"] form .button {
    background-color: var(--primary-color) !important;
}
*/

html[data-theme="dark"] .form .button:hover,
html[data-theme="dark"] form .button:hover {
    background-color: var(--primary-hover) !important;
}

html[data-theme="dark"] ul li:not(.nav-item):not(.dropdown-item).active {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .account-type label {
    background-color: var(--surface-secondary);
}

html[data-theme="dark"] .account-type label:hover {
    background-color: var(--surface-hover) !important;
}

html[data-theme="dark"] .radio input[type="radio"] + label .radio-label {
    background-color: var(--text-secondary) !important;
}

html[data-theme="dark"] .radio input[type="radio"]:checked + label .radio-label {
    background-color: var(--primary-color-light) !important;
}

html[data-theme="dark"] .account-type input.account-type-radio:checked ~ label,
html[data-theme="dark"] .account-type input.account-type-radio:checked ~ label:hover {
    background-color: #47bb67 !important;
}

html[data-theme="dark"] .icon-vault {
    color: #3f51b5;
}

html[data-theme="dark"] .icon-money-transfer {
    color: #ff9800;
}

html[data-theme="dark"] .icon-unbalanced {
    color: #e91e63;
}

html[data-theme="dark"] .icon-approved-user {
    color: #4caf50;
}

html[data-theme="dark"] .icon-user-card {
    color: #9c27b0;
}

html[data-theme="dark"] .icon-user-tie {
    color: #2196f3;
}

html[data-theme="dark"] .icon-building-user {
    color: #ff5722;
}

html[data-theme="dark"] .icon-agency {
    color: #607d8b;
}

html[data-theme="dark"] .stats-card .icon-material-outline-monetization-on {
    color: #49b4d1 !important;
}

html[data-theme="dark"] .card-body i.fa-users {
    color: #718096 !important;
}

html[data-theme="dark"] .card-body i.fa-user-friends {
    color: #718096 !important;
}

html[data-theme="dark"] .text-danger,
html[data-theme="dark"] .card-body .text-danger,
html[data-theme="dark"] .card-body i.text-danger,
html[data-theme="dark"] i.text-danger[class*="icon-material-outline"],
html[data-theme="dark"] .text-danger span:not(.badge):not(.label):not(.overview-value) {
    color: #fc8181 !important;
}

html[data-theme="dark"] i.fa-screwdriver-wrench {
    color: #888 !important;
}

html[data-theme="dark"] .post-shares i,
html[data-theme="dark"] .post-shares .icon {
    color: #718096 !important;
}

html[data-theme="dark"] i.icon-active-jobs {
    color: #ff5722 !important;
}

html[data-theme="dark"] i.icon-new-applicants {
    color: #4caf50 !important;
}

html[data-theme="dark"] i.icon-reviewed {
    color: #3f51b5 !important;
}

html[data-theme="dark"] i.icon-shortlisted {
    color: #9c27b0 !important;
}

html[data-theme="dark"] i.icon-brand-linkedin-in {
    color: var(--text-color) !important;
}

html[data-theme="dark"] .fa-coins.icon-user-card {
    color: #f6ad55 !important;
}

html[data-theme="dark"] .stats-card .icon-feather-layers.icon-building-user {
    color: #0dcaf0 !important;
}

html[data-theme="dark"] .fa-clipboard-check.icon-user-card {
    color: #0d6efd !important;
}

html[data-theme="dark"] .fa-briefcase.icon-user-card {
    color: #6f42c1 !important;
}

html[data-theme="dark"] .fa-layer-group.icon-user-card {
    color: #20c997 !important;
}

html[data-theme="dark"] .notification-icon i.fa-star,
html[data-theme="dark"] .header-notifications-content .notification-icon i.fa-star {
    color: #ffd147 !important;
}

html[data-theme="dark"] .notification-icon i.fa-language,
html[data-theme="dark"] .header-notifications-content .notification-icon i.fa-language {
    color: #8c74db !important;
}

html[data-theme="dark"] .notification-icon i.fa-check-circle,
html[data-theme="dark"] .notification-icon i.fa-handshake,
html[data-theme="dark"] .notification-icon i.fa-plug-circle-check,
html[data-theme="dark"] .header-notifications-content .notification-icon i.fa-check-circle,
html[data-theme="dark"] .header-notifications-content .notification-icon i.fa-handshake,
html[data-theme="dark"] .header-notifications-content .notification-icon i.fa-plug-circle-check {
    color: #43d063 !important;
}

html[data-theme="dark"] .notification-icon i.fa-file-import,
html[data-theme="dark"] .header-notifications-content .notification-icon i.fa-file-import {
    color: #57a8ff !important;
}

html[data-theme="dark"] .notification-icon i.fa-calendar-plus,
html[data-theme="dark"] .header-notifications-content .notification-icon i.fa-calendar-plus {
    color: #ffa358 !important;
}

html[data-theme="dark"] .notification-icon i.fa-times-circle,
html[data-theme="dark"] .notification-icon i.fa-calendar-xmark,
html[data-theme="dark"] .header-notifications-content .notification-icon i.fa-times-circle,
html[data-theme="dark"] .header-notifications-content .notification-icon i.fa-calendar-xmark {
    color: #ed5e6d !important;
}

html[data-theme="dark"] .text-success,
html[data-theme="dark"] i.text-success[class*="icon-material-outline"] {
    color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
}

html[data-theme="dark"] .text-info,
html[data-theme="dark"] .text-info span:not(.badge):not(.label):not(.overview-value) {
    color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important;
}

html[data-theme="dark"] .not-rated,
html[data-theme="dark"] .company-not-rated {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .task-listing-bid .not-rated,
html[data-theme="dark"] .task-listing-bid .company-not-rated {
    background-color: var(--surface-hover) !important;
}

html[data-theme="dark"] .letters-list {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .pagination .pagination-arrow a {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .compact-list-layout {
    background-color: var(--background-color) !important;
}

html[data-theme="dark"] .profile-overview {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .category-widget ul:not(.nav):not(.dropdown-menu) {
    background-color: transparent !important; /* var(--background-color) */
}

html[data-theme="dark"] .category-widget ul li:not(.nav-item):not(.dropdown-item) {
    background-color: transparent !important;
}

html[data-theme="dark"] .docs-container ul:not(.nav):not(.dropdown-menu),
html[data-theme="dark"] .docs-container ul li:not(.nav-item):not(.dropdown-item),
html[data-theme="dark"] .main-post ul:not(.nav):not(.dropdown-menu),
html[data-theme="dark"] .main-post ul li:not(.nav-item):not(.dropdown-item) {
    background-color: transparent !important;
}

html[data-theme="dark"] .docs-section {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .main-post .post-meta .post-category,
html[data-theme="dark"] .post-body .post-meta .post-category {
    color: var(--text-color) !important;
    font-weight: 300;
}

html[data-theme="dark"] .post-body .post-meta a.post-category:hover {
    color: var(--text-color) !important;
}

html[data-theme="dark"] .tags-widget ul:not(.nav):not(.dropdown-menu) {
    background-color: transparent !important;
}

html[data-theme="dark"] .tt-menu,
html[data-theme="dark"] .tt-menu .job-found {
    background: var(--surface-secondary) !important;
}

html[data-theme="dark"] .intro-search-field .tt-menu,
html[data-theme="dark"] .intro-search-field .tt-menu .job-found {
    background: var(--surface-color) !important;
}

html[data-theme="dark"] .tt-menu .job-found:hover {
    background: var(--surface-hover) !important;
}

html[data-theme="dark"] .intro-search-field {
    border-right: none;
}

html[data-theme="dark"] .tabs {
    background: var(--surface-color) !important;
}

html[data-theme="dark"] .tabs-content:after {
    box-shadow: none;
}

html[data-theme="dark"] .file-box-logo,
html[data-theme="dark"] .file-box-bg,
html[data-theme="dark"] .filepond--drop-label,
html[data-theme="dark"] .filepond--drop-label label {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .fun-fact {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .compact-card .fun-fact-icon {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] form .label {
    background-color: transparent !important;
}

html[data-theme="dark"] .calendar-info-popup,
html[data-theme="dark"] #choose-cv-template-popup-form,
html[data-theme="dark"] #sign-in-dialog,
html[data-theme="dark"] #wup-dialog,
html[data-theme="dark"] #agreement-dialog,
html[data-theme="dark"] #agreement-dialog-child,
html[data-theme="dark"] #small-dialog-1,
html[data-theme="dark"] #small-dialog-2,
html[data-theme="dark"] #small-dialog-3,
html[data-theme="dark"] #small-dialog-4,
html[data-theme="dark"] #small-dialog-delete,
html[data-theme="dark"] #small-dialog,
html[data-theme="dark"] #disconnect-stripe-dialog,
html[data-theme="dark"] #payoutConfirmModal,
html[data-theme="dark"] #risk-details-modal,
html[data-theme="dark"] #create-new-stripe-dialog,
html[data-theme="dark"] .mfp-content > .zoom-anim-dialog {
    background: var(--surface-color) !important;
}

html[data-theme="dark"] .calendar-info-popup span.line,
html[data-theme="dark"] #wup-dialog .mfp-close,
html[data-theme="dark"] #choose-cv-template-popup-form .mfp-close,
html[data-theme="dark"] #sign-in-dialog.dialog-with-tabs .mfp-close,
html[data-theme="dark"] #small-dialog.dialog-with-tabs .mfp-close,
html[data-theme="dark"] #small-dialog-1.dialog-with-tabs .mfp-close,
html[data-theme="dark"] #small-dialog-2.dialog-with-tabs .mfp-close,
html[data-theme="dark"] #small-dialog-3.dialog-with-tabs .mfp-close,
html[data-theme="dark"] #small-dialog-4.dialog-with-tabs .mfp-close,
html[data-theme="dark"] #small-dialog-delete.dialog-with-tabs .mfp-close,
html[data-theme="dark"] #disconnect-stripe-dialog .mfp-close,
html[data-theme="dark"] #payoutConfirmModal .mfp-close,
html[data-theme="dark"] #risk-details-modal .mfp-close,
html[data-theme="dark"] #create-new-stripe-dialog .mfp-close,
html[data-theme="dark"] .mfp-content > .zoom-anim-dialog .mfp-close {
    /* background: var(--dropdown-bg) !important; */
    /* border-color: var(--dropdown-bg) !important; */
    background-color: var(--surface-secondary) !important;
    border-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .calendar-info-popup .mfp-close {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .popup-tab-content .welcome-text,
html[data-theme="dark"] #disconnect-stripe-dialog .welcome-text,
html[data-theme="dark"] #payoutConfirmModal .welcome-text {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .headline {
    background-color: transparent !important;
}

html[data-theme="dark"] .dashboard-job-candidates-manage .headline {
    border-top-color: var(--background-color) !important;
}

html[data-theme="dark"] .dashboard-job-candidates-manage .headline-top {
    border-top: none  !important;
}

html[data-theme="dark"] .header-details ul li:not(.nav-item):not(.dropdown-item) {
    background-color: transparent !important;
}

html[data-theme="dark"] .bootstrap-select.btn-group button {
    background: var(--input-bg) !important;
}

html[data-theme="dark"] .with-border.bootstrap-select.btn-group button {
    border-color: var(--input-border) !important;
}

html[data-theme="dark"] .tabs-header {
    background: var(--surface-secondary) !important;
}

html[data-theme="dark"] .tabs-header > ul:not(.nav):not(.dropdown-menu),
html[data-theme="dark"] .tabs-header > ul li:not(.nav-item):not(.dropdown-item) {
    background: var(--surface-secondary) !important;
}

html[data-theme="dark"] .tabs-header ul li.active a {
    background: var(--active-bg) !important;
}

html[data-theme="dark"] .datepicker-picker {
    background-color: var(--background-color) !important;
}

html[data-theme="dark"] .datepicker-cell.focused:not(.selected) {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .datepicker-cell:not(.disabled):hover {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .nav-tabs {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .overview-card,
html[data-theme="dark"] .tasks-card,
html[data-theme="dark"] .interviews-card {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .overview-card .nav-tabs,
html[data-theme="dark"] .tasks-card .nav-tabs,
html[data-theme="dark"] .interviews-card .nav-tabs {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] ul:not(.nav):not(.dropdown-menu).footer-social-links,
html[data-theme="dark"] ul:not(.nav):not(.dropdown-menu).footer-social-links li {
    background-color: transparent !important;
}

html[data-theme="dark"] .fc-theme-standard .fc-scrollgrid,
html[data-theme="dark"] .header-notifications-headline,
html[data-theme="dark"] .small-footer {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .fc .fc-daygrid-day.fc-day-today,
html[data-theme="dark"] #calendar_dashboard.fc .fc-daygrid-day.fc-day-today {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] #nav-menu-desktop-toggle {
    background-color: var(--text-muted) !important;
}

html[data-theme="dark"] .price-table .fa-check {
    color: var(--primary-color-light) !important;
}

html[data-theme="dark"] .input-group.search {
    background-color: transparent !important;
}

html[data-theme="dark"] .input-group-text {
    background-color: var(--surface-hover) !important;
    border-color: var(--surface-hover) !important;
}

html[data-theme="dark"] .popup-tabs-nav li a {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .popup-tabs-nav li a:hover {
    background-color: var(--surface-hover) !important;
}

html[data-theme="dark"] .popup-tabs-nav li.active:after {
    background-color: var(--border-color) !important;
}

html[data-theme="dark"] .social-login-separator:before {
    background-color: var(--border-color) !important;
}

html[data-theme="dark"] .hot-jobs-list .hot-jobs-img {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] textarea:hover,
html[data-theme="dark"] select.with-border:hover,
html[data-theme="dark"] input.with-border:hover,
html[data-theme="dark"] textarea.form-control:hover,
html[data-theme="dark"] select.form-control:hover,
html[data-theme="dark"] input.form-control:hover,
html[data-theme="dark"] select.input-text:hover,
html[data-theme="dark"] input.input-text:hover {
    border-color: var(--input-border) !important;
}

html[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .user-status {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .social-login-buttons button.github-login {
    border-color: var(--text-secondary) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .overview-card .nav-tabs .nav-link.active,
html[data-theme="dark"] .tasks-card .nav-tabs .nav-link.active,
html[data-theme="dark"] .interviews-card .nav-tabs .nav-link.active {
    background-color: var(--surface-hover) !important;
}

/*
html[data-theme="dark"] .modal-footer {
    background-color: transparent !important;
}
*/

html[data-theme="dark"] .modal-footer {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .modal-content {
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color) !important;
}

html[data-theme="dark"] .post-comments .media {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .image-uploader {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .note-priority.medium {
    background-color: #f59110 !important;
}

html[data-theme="dark"] .dashboard-note {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .dashboard-note:before {
    border-right-color: var(--surface-color) !important;
    border-left-color: var(--surface-color) !important;
}

html[data-theme="dark"] .note-footer,
html[data-theme="dark"] .note-buttons {
    background-color: transparent !important;
}

html[data-theme="dark"] .dashboard-box .add-note-button,
html[data-theme="dark"] .dashboard-box .add-note-button:hover {
    background-color: transparent !important;
}

html[data-theme="dark"] .dashboard-box div.add-note-button {
    border-top: 1px solid var(--border-color) !important;
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .interview-item {
    border-bottom-color: var(--border-color) !important;
}

html[data-theme="dark"] .delete-box-calendar {
    background-color: transparent !important;
}

html[data-theme="dark"] .add-note-button a.button:hover {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .mmenu-trigger {
    background-color: var(--surface-hover) !important;
}

html[data-theme="dark"] .hamburger-inner,
html[data-theme="dark"] .hamburger-inner::before,
html[data-theme="dark"] .hamburger-inner::after {
    background-color: var(--text-muted) !important;
}

html[data-theme="dark"] .flatpickr-calendar {
    background-color: var(--background-color) !important;
    box-shadow: 2px 5px 10px 0px rgba(0, 0, 0, 0.7) !important;
}

html[data-theme="dark"] .flatpickr-calendar .flatpickr-time-separator {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] span.flatpickr-day.flatpickr-disabled:not(.badge):not(.label):not(.overview-value),
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled:hover {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .dashboard-box .mark-as-read {
    background-color: var(--surface-hover) !important;
}

html[data-theme="dark"] .dashboard-box .mark-as-read i {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .dropdown-menu {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .dropdown-menu > li > a:hover {
    background-color: var(--surface-hover) !important;
}

html[data-theme="dark"] .bg-success {
    background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

html[data-theme="dark"] .btn-close {
    background-color: var(--surface-secondary) !important;
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .message-bubble:not(.me) .message-text {
    background-color: var(--surface-hover) !important;
}

html[data-theme="dark"] .message-bubble.attachment:not(.me) .message-text {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .message-bubble:not(.me) .message-text:before {
    border-right-color: var(--surface-hover) !important;
}

html[data-theme="dark"] .messages-headline {
    background-color: var(--surface-secondary) !important;
    border-color: var(--sidebar-hover) !important;
}

html[data-theme="dark"] .message-reply {
    border-color: var(--sidebar-hover) !important;
}

html[data-theme="dark"] .messages-container {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .notification-icon,
html[data-theme="dark"] .header-notifications-content .notification-icon {
    background-color: var(--surface-hover) !important;
}

html[data-theme="dark"] .intro-search-field input.form-control {
    border-color: transparent !important;
}

html[data-theme="dark"] .price-table tr:nth-child(even) {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .boxed-widget-headline {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .payment {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .payment-tab {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .payment-tab.payment-tab-active {
    background-color: var(--surface-hover) !important;
}

html[data-theme="dark"] .payment-tab-content {
    background-color: var(--surface-hover) !important;
}

html[data-theme="dark"] .qc-cmp-cleanslate > div {
    background-color: var(--background-color) !important;
}

html[data-theme="dark"] .qc-cmp-cleanslate img {
    content: url(/assets/images/work_white.png) !important;
}

html[data-theme="dark"] .qc-cmp-cleanslate button[mode="secondary"] {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .qc-cmp-cleanslate button,
html[data-theme="dark"] .qc-cmp-cleanslate .qc-cmp2-toggle-switch button,
html[data-theme="dark"] .qc-cmp2-footer .qc-cmp2-footer-links button:not(.qc-cmp2-link-active),
html[data-theme="dark"] .qc-cmp2-consent-info .qc-cmp2-header-links button,
html[data-theme="dark"] .qc-cmp2-consent-info .qc-cmp2-publisher-logo-container .qc-cmp2-home-button {
    color: var(--primary-color-light) !important;
}

html[data-theme="dark"] .qc-cmp2-consent-info .qc-cmp2-publisher-logo-container .qc-cmp2-home-button svg use {
    fill: var(--text-color) !important;
}

html[data-theme="dark"] .qc-cmp2-consent-info .qc-cmp2-publisher-logo-container .description,
html[data-theme="dark"] .qc-cmp2-footer {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .qc-cmp2-footer.qc-cmp2-footer-overlay::before {
    background: linear-gradient(0deg, var(--surface-color), rgba(0, 0, 0, 0)) !important;
}

html[data-theme="dark"] .content-column ul:not(.nav):not(.dropdown-menu),
html[data-theme="dark"] .content-column ul li:not(.nav-item):not(.dropdown-item) {
    background-color: transparent !important;
}

html[data-theme="dark"] .btn-box {
    background-color: transparent !important;
}

html[data-theme="dark"] .splide--draggable > .splide__track {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .tasks-list-container.compact-list {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .tasks-list-container .task-listing-bid {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .col.earningstats {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .footer-links ul li a span:before {
    background-color: var(--primary-color-light) !important;
}

html[data-theme="dark"] .uploadButton .uploadButton-button,
html[data-theme="dark"] .pricing-plan .button {
    border-color: var(--primary-color-light) !important;
}

html[data-theme="dark"] .product .product-info {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .task-tags span {
    background-color: rgba(42, 65, 232, .37) !important;
}

html[data-theme="dark"] .job-listing-company-logo svg path {
    stroke: var(--text-muted) !important;
}

html[data-theme="dark"] #users_list td table {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] table.dataTable td.dt-control:before {
    border-left-color: var(--primary-color-light) !important;
}

html[data-theme="dark"] table.dataTable tr.dt-hasChild td.dt-control:before {
    border-top-color: var(--primary-color-light) !important;
    border-left-color: transparent !important;
}

html[data-theme="dark"] .dataTable .dt-hasChild td {
    background-color: #000 !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_processing {
    background: var(--background-color) !important;
}

html[data-theme="dark"] .vertical-timeline::before {
    background-color: var(--border-color) !important;
}

html[data-theme="dark"] .history-comment {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .clockdiv {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .border-top-line {
    border-top-color: var(--border-color) !important;
}

html[data-theme="dark"] .filter-section {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .sort-controls a:hover {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .sort-controls a.active:not(.button):not(.btn) {
    background-color: var(--surface-secondary) !important;
    color: var(--text-color) !important;
}

html[data-theme="dark"] .keyword-suggestions {
    background-color: var(--surface-color) !important;
    border-color: var(--input-border) !important;
}

html[data-theme="dark"] .keyword-suggestion-item:hover {
    background-color: var(--surface-hover) !important;
}

html[data-theme="dark"] .keyword {
    background-color: rgba(42, 65, 232, .37);
}

html[data-theme="dark"] .keywords-container-profile-skills .keyword-new {
    background-color: #ffc10780;
}

html[data-theme="dark"] .matching-circle {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .wt-poster-controls #textControls {
    background-color: var(--surface-color) !important;
    border-color: var(--input-border) !important;
}

html[data-theme="dark"] .wt-poster-toolbar {
    background-color: var(--surface-color) !important;
    border-color: var(--input-border) !important;
}

html[data-theme="dark"] .wt-btn-blue,
html[data-theme="dark"] .wt-btn-blue.mb-3 {
    background-color: var(--primary-color) !important;
}

html[data-theme="dark"] .wt-btn-blue:hover,
html[data-theme="dark"] .wt-btn-blue.mb-3:hover {
    background-color: var(--primary-hover) !important;
}

html[data-theme="dark"] .btn-toolbar .wt-btn {
    background-color: var(--surface-secondary) !important;
    border-color: var(--input-border) !important;
}

html[data-theme="dark"] .btn-toolbar .wt-btn:hover {
    background-color: var(--surface-hover) !important;
}

html[data-theme="dark"] .btn-toolbar .wt-btn.active {
    background-color: var(--surface-color) !important;
    border-color: var(--orange-text-color) !important;
    color: var(--orange-text-color) !important;
}

html[data-theme="dark"] .wt-poster-canvas {
    border-color: var(--input-border) !important;
}

html[data-theme="dark"] .canvas-container {
    border-color: var(--input-border) !important;
}

html[data-theme="dark"] .wt-poster-card {
    border-color: var(--input-border) !important;
}

/* html[data-theme="dark"] .buttons-to-right {
    box-shadow: 0 0 10px 15px var(--surface-color) !important;
} */

html[data-theme="dark"] .dashboard-box .buttons-to-right .button.dark {
    box-shadow: 0 3px 10px 8px var(--surface-color) !important;
}

html[data-theme="dark"] .datetime-picker-wrapper {
    background-color: var(--modal-bg) !important;
    color: var(--text-color) !important;
}

html[data-theme="dark"] .datetime-picker-wrapper .btn-secondary {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .datetime-picker-wrapper .btn-secondary:hover {
    background-color: var(--surface-hover) !important;
}

html[data-theme="dark"] .task-item {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"]  input:is(:autofill),
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill:hover,
html[data-theme="dark"] textarea:-webkit-autofill:focus,
html[data-theme="dark"] select:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill:hover,
html[data-theme="dark"] select:-webkit-autofill:focus {
    border: 1px solid var(--primary-color-light) !important;
    -webkit-text-fill-color: var(--text-color) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--surface-secondary) inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

html[data-theme="dark"] .payout-method {
    background-color: var(--surface-color) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .payout-method.active {
    background-color: var(--surface-secondary) !important;
    border-color: var(--primary-color-light) !important;
}

html[data-theme="dark"] .blog-post-info-list a.blog-post-info,
html[data-theme="dark"] .blog-post-info-list .blog-post-info {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .comment-by a.reply {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .dashboard-content-inner .comments ul li:not(.nav-item):not(.dropdown-item) {
    background-color: var(--background-color) !important;
}

html[data-theme="dark"] .widget-tabs .widget-text table th {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .widget-tabs .widget-text table tr:hover td {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .payments-status-card {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .transaction-history-modal .welcome-text {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] #transaction-history-container .notification ul:not(.nav):not(.dropdown-menu),
html[data-theme="dark"] #transaction-history-container .notification ul:not(.nav):not(.dropdown-menu) li {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .charge-item {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] span.domain-badge:not(.badge):not(.label):not(.overview-value) {
    color: var(--text-secondary-dark) !important;
}

html[data-theme="dark"] .inner-block[class*="bg-light"] {
    background-color: var(--surface-secondary) !important;
}

/* --- new END */

/* Timeline Icon Colors - Higher specificity */
.vertical-timeline-element .vertical-timeline-element-icon i.icon-feather-check {
    color: #28a745 !important; /* Green for completed/delivered */
}

.vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-local-atm {
    color: #ffc107 !important; /* Yellow for additional charge created */
}

.vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-monetization-on {
    color: #28a745 !important; /* Green for payment */
}

.vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-highlight-off {
    color: #dc3545 !important; /* Red for cancelled */
}

.vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-arrow-forward {
    color: #fd7e14 !important; /* Orange for revision requested */
}

.vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-arrow-back {
    color: #17a2b8 !important; /* Blue for revision made */
}

.vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-access-time {
    color: #6f42c1 !important; /* Purple for time extension */
}

.vertical-timeline-element .vertical-timeline-element-icon i.icon-feather-x {
    color: #dc3545 !important; /* Red for cancelled */
}

.vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-check {
    color: #28a745 !important; /* Green for finished */
}

/* Dark theme overrides for timeline icons - Higher specificity */
html[data-theme="dark"] .vertical-timeline-element .vertical-timeline-element-icon i.icon-feather-check {
    color: #4ade80 !important; /* Lighter green for dark theme */
}

i.icon-color-yellow,
html[data-theme="dark"] .content i.icon-color-yellow,
html[data-theme="dark"] .candidate-rating-display i.icon-color-yellow,
html[data-theme="dark"] .vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-local-atm {
    color: #fbbf24 !important; /* Lighter yellow for dark theme */
}

i.icon-color-grey,
html[data-theme="dark"] .content i.icon-color-grey,
html[data-theme="dark"] .candidate-rating-display i.icon-color-grey {
    color: #d1d5db !important;
}

html[data-theme="dark"] .vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-monetization-on {
    color: #4ade80 !important; /* Lighter green for dark theme */
}

html[data-theme="dark"] .vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-highlight-off {
    color: #f87171 !important; /* Lighter red for dark theme */
}

html[data-theme="dark"] .vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-arrow-forward {
    color: #fb923c !important; /* Lighter orange for dark theme */
}

html[data-theme="dark"] .vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-arrow-back {
    color: #22d3ee !important; /* Lighter blue for dark theme */
}

html[data-theme="dark"] .vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-access-time {
    color: #a78bfa !important; /* Lighter purple for dark theme */
}

html[data-theme="dark"] .vertical-timeline-element .vertical-timeline-element-icon i.icon-feather-x {
    color: #f87171 !important; /* Lighter red for dark theme */
}

html[data-theme="dark"] .vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-check {
    color: #4ade80 !important; /* Lighter green for dark theme */
}

/* Hover effects for timeline icons */
.vertical-timeline-element .vertical-timeline-element-icon i:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Icon background colors for better visibility */
.vertical-timeline-element .vertical-timeline-element-icon {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    position: relative;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] .vertical-timeline-element .vertical-timeline-element-icon {
    background: rgba(30, 30, 30, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Additional charge specific icon styling */
.vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-local-atm,
.vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-monetization-on,
.vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-highlight-off {
    font-size: 18px;
}

/* Payment related icons */
.vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-monetization-on {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Status specific icon enhancements */
.vertical-timeline-element .vertical-timeline-element-icon i.icon-feather-check {
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.3);
}

.vertical-timeline-element .vertical-timeline-element-icon i.icon-feather-x {
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.3);
}

.vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-local-atm {
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
}

html[data-theme="dark"] .vertical-timeline-element .vertical-timeline-element-icon i.icon-feather-check {
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
}

html[data-theme="dark"] .vertical-timeline-element .vertical-timeline-element-icon i.icon-feather-x {
    box-shadow: 0 0 10px rgba(248, 113, 113, 0.4);
}

html[data-theme="dark"] .vertical-timeline-element .vertical-timeline-element-icon i.icon-material-outline-local-atm {
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

/* Fix for date element overlapping */
.vertical-timeline-element-date {
    position: relative;
    z-index: 5;
}

/* Ensure timeline icons are always visible */
.vertical-timeline-element .vertical-timeline-element-icon {
    position: relative;
    z-index: 15 !important;
}

/* Force color override for all timeline icons */
.vertical-timeline-element .vertical-timeline-element-icon i {
    color: inherit !important;
}

/* Additional specificity for icon colors */
.vertical-timeline-element .vertical-timeline-element-icon i[class*="icon-"] {
    color: inherit !important;
}

/* ------ frontend */

html[data-theme="dark"] button.splide__arrow:hover {
    background: #ccc !important;
    transform: translateY(-50%) !important;
}

html[data-theme="dark"] .hot-jobs-sidebar .hot-job-sidebar .hot-job-sidebar-content h3 {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .hot-jobs-sidebar .hot-job-sidebar .hot-job-sidebar-content ul li span {
    color: var(--text-secondary-dark) !important;
    background-color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .notification {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .notification.notice,
html[data-theme="dark"] .notification.notice ul:not(.nav):not(.dropdown-menu),
html[data-theme="dark"] .notification.notice ul li:not(.nav-item):not(.dropdown-item) {
    background-color: var(--active-bg) !important;
}

html[data-theme="dark"] .notification.warning {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .sidebar-widget-social ul:not(.nav):not(.dropdown-menu),
html[data-theme="dark"] .sidebar-widget-social ul li:not(.nav):not(.dropdown-menu) {
    background-color: transparent !important;
}

html[data-theme="dark"] .success small {
    color: var(--text-color) !important;
}

html[data-theme="dark"] .freelancer-details {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .job-overview-inner {
    background-color: var(--surface-color) !important;
}

/*
html[data-theme="dark"] a:hover:not(.button):not(.btn).log-in-button {
    transform: translateY(-50%) !important;
}
*/

html[data-theme="dark"] .footer-links a:hover:not(.button):not(.btn).log-in-button {
    transform: none !important;
}

html[data-theme="dark"] .main-post .post-meta a:hover:not(.button):not(.btn).post-category,
html[data-theme="dark"] .post-body .post-meta a:hover:not(.button):not(.btn).post-category {
    color: var(--text-color) !important;
}

html[data-theme="dark"] .job-listing:hover,
html[data-theme="dark"] .task-listing:hover,
html[data-theme="dark"] .freelancer:hover {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .dashboard-box-list .job-listing:hover {
    background-color: transparent !important;
}

html[data-theme="dark"] span:not(.badge):not(.label):not(.overview-value).small-label {
    color: #449626 !important;
}

html[data-theme="dark"] .content i {
    color: inherit !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .help-icon:hover {
    color: var(--primary-color-light) !important;
}

html[data-theme="dark"] .job-listing {
    border: none !important;
}

html[data-theme="dark"] .compact-list-layout .job-listing:nth-child(2n) {
    background-color: var(--hover-bg) !important;
}

html[data-theme="dark"] .compact-list-layout .job-listing:before {
    background-color: var(--primary-color-light) !important;
}

html[data-theme="dark"] .tagify {
    border-color: var(--input-border) !important;
}

html[data-theme="dark"] .tagify:focus-within {
    border-color: var(--primary-color-light) !important;
}

html[data-theme="dark"] span:not(.badge):not(.label):not(.overview-value).tagify__tag-text {
    color: var(--text-secondary-dark) !important;
}

html[data-theme="dark"] .tagify__input::before {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .tagify__dropdown div {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--input-border) !important;
}

html[data-theme="dark"] div.tagify__dropdown__item {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] div.tagify__dropdown__item--active,
html[data-theme="dark"] div.tagify__dropdown__item:hover {
    background-color: var(--surface-hover) !important;
}

html[data-theme="dark"] .button:hover:not(.button-sliding-icon):not(.with-icon):not(.button-grey) {
    background-color: var(--surface-hover) !important;
}

html[data-theme="dark"] .price .button:hover:not(.button-sliding-icon):not(.with-icon):not(.button-grey) {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] a:not(.button):not(.btn).badge {
    color: var(--text-secondary-dark) !important;
    background-color: #ffc107 !important;
}

html[data-theme="dark"] span:not(.badge):not(.label):not(.overview-value).categorytitle,
html[data-theme="dark"] .hot-jobs-content span:not(.badge):not(.label):not(.overview-value).categorytitle {
    color: var(--orange-text-color) !important;
}

html[data-theme="dark"] .bootstrap-select .dropdown-menu li.selected a span.check-mark:before {
    color: var(--primary-color-light) !important;
}

html[data-theme="dark"] .language-switcher .dropdown-menu {
    box-shadow: none !important;
}

html[data-theme="dark"] .bootstrap-select:before {
    background-color: transparent !important;
}

html[data-theme="dark"] .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
}

html[data-theme="dark"] .notification.error a.close:not(.button):not(.btn) {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .newsletter button:hover {
    background-color: var(--primary-hover) !important;
}

html[data-theme="dark"] .newsletter button:hover i {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] a:not(.button):not(.btn) {
    color: var(--text-color) !important;
}

html[data-theme="dark"] label a:not(.button):not(.btn),
html[data-theme="dark"] p a:not(.button):not(.btn) {
    color: var(--primary-color-light) !important;
}

html[data-theme="dark"] .calendar-info-popup a:not(.button):not(.btn) {
    color: var(--primary-link-color) !important;
}

html[data-theme="dark"] .calendar-info-popup a:not(.button):not(.btn):hover {
    color: var(--primary-color-light) !important;
}

html[data-theme="dark"] a.apply-now-button:not(.button):not(.btn):hover {
    color: var(--text-color) !important;
}

html[data-theme="dark"] .btn-style-one:hover {
    background-color: var(--hover-bg) !important;
    color: var(--text-color) !important;
}

html[data-theme="dark"] a.btn-style-one:hover:not(.button):not(.btn) {
    color: var(--text-color) !important;
}

html[data-theme="dark"] form input.button:not(.button-sliding-icon) {
    background-color: var(--primary-color) !important;
}

html[data-theme="dark"] input.button:hover:not(.button-sliding-icon):not(.with-icon):not(.button-grey) {
    background-color: var(--hover-bg) !important;
    color: var(--text-color) !important;
}

html[data-theme="dark"] input.button:hover {
    border-color: var(--input-border) !important;
}

html[data-theme="dark"] .button.btn-warning,
html[data-theme="dark"] .btn.btn-warning,
html[data-theme="dark"] .btn.btn-info {
    color: var(--text-color-black) !important; /* color: var(--primary-color) !important; */
}

html[data-theme="dark"] .button.btn-success,
html[data-theme="dark"] .btn.btn-success,
html[data-theme="dark"] a.btn.btn-success:hover {
    color: var(--text-color) !important;
}

html[data-theme="dark"] .footer-row,
html[data-theme="dark"] .footer-rows-right .footer-row:first-child,
html[data-theme="dark"] .footer-top-section,
html[data-theme="dark"] .footer-bottom-section,
html[data-theme="dark"] .border-top {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .header-notifications.active .header-notifications-dropdown {
    box-shadow: 0 0 18px 0 var(--background-color) !important;
}

/* TODO */
html[data-theme="dark"] .dashboard-box-list .button,
html[data-theme="dark"] .dashboard-box .button {
    /* background-color: var(--primary-color) !important; */
    color: var(--text-color) !important;
}

html[data-theme="dark"] .dashboard-box .button.dark {
    background-color: var(--primary-color) !important;
    color: var(--text-color) !important;
}

html[data-theme="dark"] .task-listing-details {
    background-color: transparent !important;
}

html[data-theme="dark"] .border-bottom {
    border-bottom: 1px solid var(--border-color) !important;
}

/* ------ Ticket Page Styles ------ */

html[data-theme="dark"] .ticket-header {
    background: var(--surface-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
}

html[data-theme="dark"] .ticket-code {
    color: var(--text-secondary);
}

html[data-theme="dark"] .ticket-title {
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

html[data-theme="dark"] .ticket-category-badge {
    background: var(--primary-color);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

html[data-theme="dark"] .ticket-description {
    background: var(--background-color);
    color: var(--text-secondary);
    border-left: 4px solid var(--primary-color);
}

html[data-theme="dark"] .comments-section {
    background: var(--surface-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
}

html[data-theme="dark"] .comments-header {
    border-bottom: 2px solid var(--border-color);
}

html[data-theme="dark"] .comment-item {
    border-bottom: 1px solid var(--border-color);
}

html[data-theme="dark"] .comment-form-section {
    background: var(--surface-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
}

html[data-theme="dark"] .form-section-title {
    color: var(--text-color);
    border-bottom: 2px solid var(--border-color);
}

html[data-theme="dark"] .sidebar-section {
    background: var(--surface-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
}

html[data-theme="dark"] .sidebar-header {
    background: var(--background-color);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

html[data-theme="dark"] .sidebar-content {
    background: var(--surface-color);
}

html[data-theme="dark"] .status-table th {
    color: var(--text-secondary);
}

html[data-theme="dark"] .status-table td {
    color: var(--text-color);
}

html[data-theme="dark"] .solution-section {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--text-color);
}

html[data-theme="dark"] .solution-title {
    color: #4ade80;
}

html[data-theme="dark"] .pictures-toggle-section {
    background: var(--background-color);
    border: 1px dashed var(--border-color);
    color: var(--text-color);
}

html[data-theme="dark"] .image-item {
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

html[data-theme="dark"] .comment-images .image-item-comment {
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

html[data-theme="dark"] .ticket-meta .blog-post-info {
    color: var(--text-secondary);
}

html[data-theme="dark"] .comment-by {
    color: var(--text-color);
}

html[data-theme="dark"] .comment-by .date {
    color: var(--text-secondary);
}

html[data-theme="dark"] .comment-content p {
    color: var(--text-color);
}

html[data-theme="dark"] .ticket-header textarea,
html[data-theme="dark"] .comment-form-section textarea {
    background: var(--input-background-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

html[data-theme="dark"] .ticket-header textarea::placeholder,
html[data-theme="dark"] .comment-form-section textarea::placeholder {
    color: var(--text-secondary);
}

html[data-theme="dark"] .notification.notice {
    background: var(--background-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

html[data-theme="dark"] .comment-item .avatar {
    float: left;
    margin-right: 15px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

html[data-theme="dark"] .comment-item .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html[data-theme="dark"] .comment-content {
    overflow: hidden;
    position: relative;
}

html[data-theme="dark"] .arrow-comment {
    position: absolute;
    left: -8px;
    top: 15px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 8px 8px 0;
    border-color: transparent var(--surface-color) transparent transparent;
}

/* ------ */

html[data-theme="dark"] .notification.error a.button {
    background-color: #99000f !important;
}

html[data-theme="dark"] .dashboard-box .headline.job-toggle-header {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .signature-notice {
    background-color: var(--surface-secondary) !important;
}

html[data-theme="dark"] .referral-cta-section {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .accordion-body {
    background-color: var(--surface-color) !important;
}

html[data-theme="dark"] .stats-grid {
    background-color: var(--background-color) !important;
}

html[data-theme="dark"] .stat-card {
    background-color: var(--surface-color) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .stat-row {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] table.basic-table th {
    background-color: #df754e !important;
}

html[data-theme="dark"] table.basic-table tr:nth-child(odd),
html[data-theme="dark"] table.basic-table tr:nth-child(odd) td {
    background-color: var(--surface-secondary) !important;
}