/* December 12, 2024 */

body.dark_mode {
    /* background-color: #121213; */
    background-color: var(--dark-body-bg-color);
}


body.dark_mode #settings_icon_circular_boundary.hide {
    border-top-color: transparent;
    border-left-color: transparent;
    box-shadow: none;
}

body.dark_mode #settings_icon_circular_boundary:before {
    outline: 12px solid var(--dark-body-bg-color);
    outline-color: yellow;
    box-shadow: 0px 0px 0px 0px skyblue;
}



body.dark_mode #settings_container {
    color: var(--dark-all-text-color);
    background-color: var(--dark-invalid-grey-bg-color);
}


body.dark_mode #settings_container,
body.dark_mode #settings_container h2,
body.dark_mode #settings_container #copyright_box,
body.dark_mode #settings_main,
body.dark_mode #settings_container .position_fixed_container,
body.dark_mode .top_blocker {
    background-color: var(--dark-body-bg-color);
}




body.dark_mode #scroll_down_for_more_wrapper_2 .background_blur {
    background-color: var(--dark-body-bg-color);
    color: var(--dark-all-text-color);
}

body.dark_mode #scroll_down_for_more_wrapper_2 .background_blur {
    background: linear-gradient(rgba(200, 200, 200, 0.7), var(--dark-invalid-grey-bg-color) 55%);
}

body.dark_mode #scroll_down_for_more_wrapper_2 .background_blur {
    /* background: linear-gradient(rgba(200, 200, 200, 0.7), var(--dark-invalid-grey-bg-color) 55%); */
    background: linear-gradient(rgba(200, 200, 200, 0.7), var(--dark-body-bg-color) 55%);
}


body.dark_mode #scroll_down_for_more_wrapper_2:before {
    border-top-color: var(--dark-invalid-grey-bg-color);
}

body.dark_mode #scroll_down_for_more_wrapper_2:before {
    border-top-color: var(--dark-invalid-grey-bg-color);
    border-top-color: var(--dark-body-bg-color);
}

body.dark_mode #scroll_down_for_more_wrapper_2 p {
    color: var(--dark-all-text-color);
}

/* body.dark_mode #scroll_down_for_more_wrapper_2 p { background-color: var(--dark-body-bg-color);} */
/* body.dark_mode #scroll_down_for_more_wrapper_2 { background-color: var(--dark-body-bg-color);} */


body.dark_mode #scroll_down_for_more_wrapper_2:after {
    border-top-color: var(--dark-all-text-color);
}






body.dark_mode #settings_main .position_fixed_container:after {
    background-color: var(--dark-body-bg-color);
}




body.dark_mode #dark_mode_container {
    border-bottom: 1px solid rgba(210, 210, 210, 0.7);
}

body.dark_mode #settings_container h2,
body.dark_mode .top_blocker,
body.dark_mode #settings_main,
body.dark_mode #settings_main:before,
body.dark_mode #settings_main .position_fixed_container:after {
    background-color: var(--dark-invalid-grey-bg-color);
    color: var(--dark-all-text-color);
}





/* 💛 .correct_letter_box 💛 */
body.dark_mode .correct_letter_box {
    border-color: #3a3a3c;
    border-color: var(--dark-border-color);
    border-color: var(--dark-border-dim-color);
    background-color: transparent;
    background-color: #141514;
    background-color: #141714;

    background-color: #141514;
    background-color: rgba(20, 21, 20, 0.5);

    /* background-color: #151515; */
}

body.dark_mode .correct_letter_box.valid_active_input {
    /* background-color: #538d4e; */
    background-color: var(--dark-valid-green-bg-color);
    color: var(--dark-all-text-color);
}









/* 💛 .letter_box 💛 */
body.dark_mode .letter_box.default_shadow {
    box-shadow: 0px 2px 3px 1px rgba(50, 50, 50, 0.6);
    box-shadow: 0px 2px 3px 1px rgba(200, 200, 200, 0.6);
}

body.dark_mode .letter_box {
    background-color: var(--light-settings-outer-bg-color);
    background-color: var(--light-settings-inner-bg-color);
}

body.dark_mode .letter_box.focused {
    background-color: var(--light-settings-inner-bg-color);
    background-color: var(--light-body-bg-color);
}

body.dark_mode .letter_box.focused {
    /* border-color: #f0f0f0; */
    border-color: #0f0f0f;
    outline: 1px solid #f0f0f0;
}

body.dark_mode .letter_box.focused.locked {
    border-width: 8px;
    border-width: 6px;
    border-style: ridge;
    border-color: #0f0f0f;
    /* border-color: #fff; */
    /* border-color: #f0f0f0; */
    outline: 2px solid #f0f0f0;
}





body.dark_mode .letter_box.maybe_yellow_input {
    background-color: #b59f3b;
    color: #f8f8f8;
}

body.dark_mode .letter_box.valid_green_input {
    background-color: var(--dark-valid-green-bg-color);
}





/* 💛 #yellow_boxes_display [s.YellowBoxesDisplay] 💛 */
#section_workarea.dark_mode .yellow_letter_box {
    border-color: #b59f3b;
}


body.dark_mode .yellow_box,
#body.dark_mode .empty_box {
    background-color: transparent;
}

body.dark_mode .yellow_letter_box {
    /* background-color: #fff; */
    background-color: var(--dark-all-text-color);
    background-color: var(--light-body-bg-color);
}





body.dark_mode .yellow_letter_drag_zone>span {
    color: rgba(200, 200, 200, 20%);
}

body.dark_mode .yellow_letter_drag_zone:before,
body.dark_mode .yellow_letter_drag_zone:nth-child(5):after {
    background: linear-gradient(rgba(200, 200, 200, 60%) 100px, rgba(200, 200, 200, 60%));
}

body.dark_mode .yellow_letter_drag_zone.long>span {
    color: rgba(210, 210, 210, 70%);
}

body.dark_mode .yellow_letter_drag_zone.long:before,
body.dark_mode .yellow_letter_drag_zone.long:nth-child(5):after {
    background: linear-gradient(transparent 17px 40px, rgba(210, 210, 210, 70%) 40px);
}





/* 💛 #section_mobile_keyboard [s.Section] 💛 */
body.dark_mode .special_btn:not(.special_btn:disabled) { background-color: #818384;}
body.dark_mode .special_btn:disabled {
    /* background-color: #818384; */
    background-color: transparent;
}

body.dark_mode .special_btn:disabled { border: 1px solid rgba(150, 150, 150, 0.3);}

body.dark_mode #btn_choose_invalid_keys.active,
body.dark_mode #btn_check_past_wordles.active {
    background-color: var(--dark-invalid-grey-bg-color);
}

body.dark_mode .letter_key, 
/* body.dark_mode .special_btn */
body.dark_mode .special_btn:not(.special_btn:disabled) 
, body.dark_mode .special_btn:disabled
{ color: #f8f8f8; /* color: red; */}


body.dark_mode .keyboard_key {
    background-color: #818384;
    /* color: #f8f8f8; */
}


body.dark_mode .letter_key.valid_green,
body.dark_mode .letter_key.valid_green.selected {
    background-color: #538d4e;
}
body.dark_mode .letter_key.invalid_grey {
    background-color: #3a3a3c;
    /* color: #3a3a3c; */
    color: #818384;
}
body.dark_mode .maybe_yellow {
    background-color: #b59f3b;
}
body.dark_mode .letter_key.selected {
    background-color: var(--dark-border-color);
    color: var(--dark-default-key-bg-color);
    color: #121212;
    color: #111;
}
body.dark_mode .cloned_letter_key {
    background-color: #d7be4c;
    color: #fff;
    color: #111;
}



body.dark_mode .letter_box.maybe_yellow_input {
    background-color: #b59f3b;
    color: #f8f8f8;
}






/* 💛 Backspace 💛 */
body.dark_mode #letter_backspace { background-color: #818384;}

/* 💛 Backspace-Arrow 💛 */
body.dark_mode #letter_backspace:before {
    /* border-right-color: var(--dark-default-key-bg-color); */
    border-right-color: #818384;
}


/* 💛 Swiped Backspace 💛 */  /* 💛 Swiped Backspace-Arrow 💛 */
body.dark_mode #letter_backspace:active { background-color: #5b5b5c;}
body.dark_mode #letter_backspace:active:before { border-right-color: #5b5b5c;}

body.dark_mode #letter_backspace.swiping_left { background-color: #5b5b5c;}
body.dark_mode #letter_backspace.swiping_left:before { border-right-color: #5b5b5c;}

body.dark_mode #letter_backspace.swiping_right { background-color: #5b5b5c;}
body.dark_mode #letter_backspace.swiping_right:before { border-right-color: #5b5b5c;}

body.dark_mode #letter_backspace.swiping_left, body.dark_mode #letter_backspace.swiping_right {background-color: var(--dark-border-color);}



/* body.dark_mode #letter_backspace.swiping_left, */
/* body.dark_mode #letter_backspace.swiping_right {
    background-color: var(--light-default-key-bg-color);
    background-color: #818384;
    background-color: #5b5b5c;
} */


/* body.dark_mode #letter_backspace.swiping_left:before, */
/* body.dark_mode #letter_backspace.swiping_right:before {
    border-left-color: var(--light-default-key-bg-color);
    border-right-color: var(--light-default-key-bg-color);
} */