:root:has(>[data-theme="dark"]) {
    ::-webkit-scrollbar {
        border: var(--border-color) !important;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--color-light) !important;
    }
}

[data-theme="dark"] {
    --color-darkgray: #1E1F22;
    --color-dark: #EAEAEA;
    --color-light: #313338;
    --border-color: #3F4147;
    --light-green: #3d4641;
    --color-highlight: #FFB20024;
    --color-blur: #313338cb;
    --color-light-shade: #1d1d1d70;
    --color-wrapper: var(--color-darkgray);
    --border-default: 1px solid var(--border-color);
    --border-light-color: var(--border-color);
    --color-light-shade: #33333370;
    --box-shadow-tool: 0px 0px 8px 1px var(--color-light-shade);
    --box-shadow-sm: 1px 1px 0px var(--color-light);
    --modal-backdrop: #000000bd;
    --color-f3f3f3: var(--color-darkgray);

    &,
    button {
        color: #fff;
    }

    background-color: var(--color-darkgray) !important;

    &:has(.tool__content, .content, .contentDiv),
    .tool__content,
    .content,
    .contentDiv {
        background-color: #1B1C1F !important;
    }

    input[type="checkbox"]+div img {
        display: none;
    }

    input[type="checkbox"]:checked+div {
        border-color: var(--border-color);
        background: var(--color-light);
        color: var(--color-light) !important;

        img {
            display: block;
        }
    }

    .captcha-div:has(*) {
        box-shadow: var(--color-black) 2px 2px 0;
    }

    .captcha-div>div {
        border-top-color: var(--color-black) !important;
    }

    .selected-language>img,
    .toolsSec .api__btn a img,
    .feedback__emoji span:not(.active, :hover) img,
    .action-btns img,
    .result__actionbar img,
    .sidebar__newdoc button>img,
    .delete__note__sidebar,
    .editor__sidebar__toggle img,
    .custom__menubar img {
        filter: brightness(0) invert(1);
    }

    .header {
        border-bottom: 1px solid;
    }

    .header,
    footer {
        background-color: var(--color-darkgray);
        border-color: var(--border-color);
    }

    .tool__wrapper {
        border-color: var(--border-color) !important;
    }

    .search-icon-image {
        filter: brightness(0) invert(1);
    }

    .nav__right__btn a,
    .nav__right__btn button {
        color: var(--color-darkgray) !important;
    }

    footer .footer-heading,
    p {
        color: var(--color-dark);
    }

    a,
    label {
        color: var(--color-dark) !important;
    }

    .plans__list label.active div>p:nth-child(2) {
        color: #fff !important;
    }

    .plans__list label.active>div:nth-child(2)>p:nth-child(2) {
        color: #fff !important;
    }

    .sample__bar {
        background-color: var(--border-color);
        color: var(--color-dark);
    }

    .tool__wrapper__design::before {
        background-color: var(--color-darkgray);
    }

    .dont-break-out h2,
    .dont-break-out h2 strong,
    .dont-break-out h3,
    .dont-break-out h3 strong,
    .dont-break-out h4,
    .dont-break-out h4 strong {
        margin-top: 35px;
        margin-bottom: 0;
        color: var(--color-dark);
    }

    .flag-n {
        color: var(--color-dark);

    }

    .uplFileBtn img {
        filter: brightness(0) invert(1);
    }

    h1 {
        color: var(--color-dark);
    }

    #input_output,
    .word_counter {
        color: var(--color-dark);

    }

    .action__button button img {
        filter: brightness(0) invert(1);

    }

    .paste__button:hover img,
    .sample__button:hover img,
    .upload__button:hover img {
        filter: brightness(0) invert(1);
    }

    .flag-n img {
        filter: brightness(0) invert(1);
    }

    .human {
        background: var(--color-dark);
    }

    .ai {
        color: var(--color-dark);

    }

    .content__information>div {
        background-color: var(--color-darkgray);
    }

    .paste__button,
    .sample__button,
    .upload__button {
        border: 1px solid var(--border-color);
    }

    .sample__bar {
        border-bottom: var(--border-default);
    }

    .h-350 {
        border: unset !important;
    }


    .flex-col #text {
        background-color: var(--color-light);
        color: var(--color-dark);
    }

    #total_wordsDiv {
        color: var(--color-dark);
    }

    .ouputsection {
        color: var(--color-dark);
    }

    .total_wordsDiv {
        color: var(--color-dark);
    }

    .alrt-label,
    .content li,
    .content p,
    .flex-col h3 {
        color: var(--color-dark);
    }

    .bg__wrapper {
        background: var(--color-darkgray);
    }

    #words_div {
        color: var(--color-dark);
    }

    .menBtn {
        color: var(--color-dark);
    }

    .punique {
        color: var(--color-dark);
    }

    .dont-break-out table th,
    table td {
        color: var(--color-dark);
    }

    .menBtn {
        box-shadow: var(--color-dark) 2px 2px 0;
        border: var(--border-default);
    }

    #topic {
        background: var(--color-darkgray);
        color: var(--color-dark);
    }

    .ep__tool__topbar2>div>span {
        color: var(--color-dark);
    }

    .main_disclamer,
    .main_disclamer a {
        color: var(--color-light) !important;
    }

    .initials__insert__div {
        background: var(--color-darkgray) !important;
    }

    .selected-language-drop {
        color: var(--color-dark);
    }

    .selected-language-drop img {
        color: var(--color-dark);
        filter: brightness(0) invert(1);
    }

    .language-selector {
        border: 1px solid var(--border-color) !important;
        & .lang-sel {
            & li a {

                &:hover,
                &:active,
                .active>& {
                    background: var(--light-green);
                }
            }
        }
        &.active {
            .lang-sel {
                border-color: var(--border-color) !important;
            }
        }
    }

    @media (min-width: 1150px) {
        .hover__effect {
            background: var(--light-green);
            border-bottom: 4px solid #1FA95B;
        }
    }

    .plan__card.active .plans__top p {
        color: var(--color-dark) !important;
    }

    .plans__switch p {
        background-color: var(--color-light);
        color: var(--color-dark);
    }

    .bg__layer {
        background-color: var(--color-light);
    }

    .plans__switch {
        background-color: var(--color-dark);
    }

    .plans__switch .active {
        background-color: var(--color-dark);
        color: var(--color-light);
    }

    .pro::after,
    .plan__allinone__top>div:nth-child(1) *,
    .planType_Yearly_Tag::after {
        color: var(--color-dark);
    }

    .plan__card:hover {
        box-shadow: 2px 2px 0 var(--color-light);
    }

    .popover__menu {
        background-color: var(--color-black);
        border-top-color: var(--color-black);
    }

    .popover__menu:after {
        border-bottom-color: var(--color-black);
    }
}