/* December 12, 2024 */

#settings_image_container {
    background-color: transparent;
}
#settings_icon_circular_boundary {
    background-color: transparent;
    box-shadow: none;
}
#settings_icon_main {
    background-color: transparent;
    background: linear-gradient(18deg, transparent 0% 14%, pink, pink 80%, blue 87%);

    /* 💥 Box-shadows 💥 */
    box-shadow: -2px -2px 1px -2px pink;
}
#settings_icon_main:before {
    background: linear-gradient(-65deg, pink 30%, pink 60%, blue 80%, blue);
    box-shadow: none;
}
#settings_icon_main:after {
    background-color: var(--dark-body-bg-color);
    box-shadow: -2px 5px 3px -2px var(--dark-body-bg-color);
}




.modal_close_container {color: #000;}



#settings_container {
    background-color: var(--light-settings-outer-bg-color);
    border: 1px solid rgba(50, 50, 50, 0.8);
    box-shadow: 0px 4px 18px 1px rgba(25, 25, 25, 0.4);
}

#settings_main {
    background-color: var(--light-body-bg-color);
}


#settings_container {
    background-color: var(--light-settings-inner-bg-color);
}

#settings_container h2 {
    color: var(--light-main-input-color);
    background-color: var(--light-settings-outer-bg-color);

    background-color: var(--light-settings-inner-bg-color);
}

#settings_container #copyright_box {
    background-color: var(--light-settings-inner-bg-color);
}

#settings_container #settings_main {
    color: var(--light-main-input-color);
    background-color: var(--light-body-bg-color);

    background-color: var(--light-settings-inner-bg-color);
}
#settings_main:before {
    background-color: inherit;
    box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.45);
}
#settings_main .position_fixed_container:after {background-color: var(--light-body-bg-color);}

.top_blocker {
    background-color: var(--light-body-bg-color);

    background-color: var(--light-settings-inner-bg-color);
}




#scroll_down_for_more_wrapper_2:before { border-top: 20px solid var(--light-body-bg-color);}
#scroll_down_for_more_wrapper_2:after { border-top: 20px solid rgba(50,50,50,0.8);}

#scroll_down_for_more_wrapper_2:before {
    border-top: 20px solid var(--light-settings-outer-bg-color);
    border-top: 20px solid rgba(239, 239, 239, 1);
}


#scroll_down_for_more_wrapper_2 .background_blur {
    background: linear-gradient(rgba(200, 200, 200, 0.7), var(--light-settings-outer-bg-color) 55%);

    background: linear-gradient(rgba(200, 200, 200, 0.7), var(--light-settings-inner-bg-color) 55%);
}
#scroll_down_for_more_wrapper_2 p { color: var(--light-main-input-color);}





#dark_mode_container {
    border-bottom: 1px solid rgba(50, 50, 50, 0.7);
}


.settings_checkbox[type="checkbox"] { border: 1px solid blue;}
.checkbox_slider {
    border: 1px solid black;
    background-color: #eee;
}
.checkbox_slider:after { background-color: #888;}
.checkbox_slider.active:after { background-color: #eee;}
.checkbox_slider.active { background-color: #48b848;}

#web_tool_explanation { border-bottom: 1px solid rgba(50, 50, 50, 0.7);}

#tutorial_title { border-top: 1px solid black;}

.valid_green_letter_text { color: #0fc00f;}
.maybe_yellow_letter_text {
    background-color: #333;
    color: rgb(232, 232, 13);
}
.invalid_grey_letter_text { color: #575757;}

.tutorial_text_box:nth-of-type(1) .tutorial_letter { background-color: #58a351;}
.tutorial_text_box:nth-of-type(2) .tutorial_letter { background-color: #c9b458;}
.tutorial_text_box:nth-of-type(3) .tutorial_letter { background-color: #787c7e;}


#btn_word_check { border: 1px solid black;}















/* 💛 #letter_number_menu [s.LetterNumberMenu] 💛 */
#letter_number_menu {
    border: 1px solid black;
}

#letter_number_menu {
    background-color: #ccc;
}

.cancel_slash_line {
    background-color: #010101;
}





/* 💛 .correct_letter_box 💛 */
.correct_letter_box {
    background-color: #fff;
    color: var(--light-main-input-color);
    border: 1px solid var(--light-focused-border-color);
}

.correct_letter_box.valid_active_input {
    color: var(--light-invalid-text-color);
    background-color: var(--light-valid-green-bg-color);
    border-color: var(--dark-border-color);
}





/* 💛 .letter_box 💛 */
.letter_box {
    color: var(--light-main-input-color);
    border: 1px solid rgba(40, 40, 40, 0.9);
}

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

.letter_box.focused {
    /* box-shadow: 0px 2px 3px 1px rgba(50,50,50,0.6); */
    /* box-shadow: 0px 2px 3px 3px rgba(50,50,50,0.6); */
    box-shadow: 0px 2px 6px 2px rgba(50, 50, 50, 0.6);
    box-shadow: 0px 2px 6px 1px rgba(50, 50, 50, 0.6);
    border-color: #2CE28A;
    border-color: #0f0f0f;
}

.letter_box.focused.locked {
    border-width: 8px;
    border-style: ridge;
    border-color: #0f0f0f;
    /* outline: 4px ridge #000; */
}

.letter_box.valid_green_input {
    background-color: var(--light-valid-green-bg-color);
    color: var(--light-invalid-text-color);
}



input.red_error.bright[type="text"] {
    /* border: 2px solid rgb(216, 5, 5); */
    box-shadow: 0px 0px 6px 1px red;
    box-shadow: 0px 0px 10px 1px rgba(216, 5, 5, 1);
}

input.red_error.dim[type="text"] {
    box-shadow: 0px 0px 10px 1px rgba(216, 5, 5, 0.5);
    /* box-shadow: 0px 0px 4px 2px rgba(216, 5, 5, 0.5); */
    box-shadow: 0px 0px 4px 1px rgba(216, 5, 5, 0.5);
}

input.border_red[type="text"] {
    /* border: 3px solid red; */
    outline: 3px solid red;
    /* box-shadow: 0px 0px 4px 2px rgba(216, 5, 5, 0.5); */
}





/* 💛 #show_input_letters_display [s.] 💛 */
/* 💛 #delete_input_letters_display [s.] 💛 */
#delete_input_letters_display,
#show_input_letters_display {
    background-color: #ff79d8;
    background-color: #fe4848;
    /* background-color: #aa0a0a; */
    color: #eee;
    color: #333;
}

#input_row_main:after {
    background-color: #fe4848;
    color: #eee;
}

.letter_box._5:after {
    background-color: #fe4848;
    color: #eee;
}

#delete_input_letters_display p,
#show_input_letters_display p {
    /* background-color: greenyellow; */
    /* background-color: darkblue; */
    /* background-color: #fff650; */
    background-color: #fff;
}

#show_input_letters_display {
    background-color: forestgreen;
}



/* #delete_input_letters_display, #show_input_letters_display {outline: none;} */
#delete_input_letters_display.set,
#show_input_letters_display.set {
    outline: 2px solid black;
}

/* #delete_input_letters_display.set, #show_input_letters_display.active.set {outline: 2px solid black;} */
/* #delete_input_letters_display, #show_input_letters_display {outline: 2px solid black;} */
/* #delete_input_letters_display, #show_input_letters_display {outline: none;} */









/* 💛 #yellow_boxes_display [s.YellowBoxesDisplay] 💛 */
.yellow_box {
    color: #333;
    /* background-color: #fff; */
}

.yellow_letter_box {
    background-color: #fff;

    /* border-color: rgb(231, 231, 42); */
    /* border-color: darkgoldenrod; */
    border-color: #c9b458;
    border-style: dashed;
    border-width: 1px;
}

.empty_box {
    border: 1px solid rgba(100, 100, 100, 0.6);
}

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




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

.yellow_letter_drag_zone>span { color: rgba(50, 50, 50, 20%);}

.yellow_letter_drag_zone.long>span {
    color: rgba(50, 50, 50, 70%);
}
.yellow_letter_drag_zone.long:before,
.yellow_letter_drag_zone.long:nth-child(5):after {
   background: linear-gradient(transparent 17px 40px, rgba(50, 50, 50, 70%) 40px);
}






/* 💛 #section_mobile_keyboard [s.Section] 💛 */
#section_mobile_keyboard {
    background-color: transparent;
    border-top: 1px solid var(--dark-all-text-color);
    border-top: 1px solid rgba(248, 248, 248, 0.35);
    box-shadow: 0px 10px 24px 2px rgba(50, 50, 50, 0.6);
}

.special_btn:not(.special_btn:disabled) {
    background-color: #D3D6DA;
    color: #fff;
    color: #222;
}

.special_btn:disabled { border: 1px solid rgba(50, 50, 50, 0.4);}

#btn_choose_invalid_keys.active,
#btn_check_past_wordles.active {
    color: #ddd;
    background-color: #575757;
}


.keyboard_key { background-color: #D3D6DA;}
.letter_key { color: #222;}

.letter_key:active { background-color: #aaa;}



.letter_key.selected {
    border: 1px solid black;
    background-color: #a9a9a9;
    background-color: #aaa;
    color: rgba(1, 1, 1, 50%);
}




.letter_key.valid_green {
    background-color: #0fc00f;
    background-color: #6aaa64;
    color: #eee;
}

.letter_key.valid_green.selected {
    background-color: #1d941d;
    color: #eee;
}

.invalid_grey {
    color: rgb(87, 87, 87);
    background-color: #787c7e;
}

.letter_key.invalid_grey {
    color: #757575;
    background-color: #575757;
    border-color: #777;
    background-color: #787c7e;
    color: #bbb;
}


.maybe_yellow {
    background-color: rgb(231, 231, 42);
    color: #333;
    background-color: rgb(242, 242, 54);
    border: 1px solid rgba(50, 50, 50, 0.5);
    background-color: #c9b458;
    color: #fff;
}


.maybe_yellow_input {
    color: #333;
    background-color: rgb(242, 242, 54);
    color: #0a0a0a;
    background-color: #c9b458;
    color: #fff;
}


.cloned_letter_key {
    background-color: rgb(231, 231, 42);
    background-color: #c9b458;
    background-color: #d7be4c;
}


#letter_backspace {
    background-color: #D3D6DA;
    /* color: #fff; */
    color: #222;
}
#letter_backspace:before {
    border-top: 29px solid transparent;
    border-bottom: 29px solid transparent;
    border-right: 20px solid var(--light-default-key-bg-color);
}

#letter_backspace.swiping_right { background-color: #333;}

#letter_backspace.swiping_right:before { border-right-color: #333;}

#letter_backspace.swiping_left { background-color: #333;}

#letter_backspace.swiping_left:before { border-right-color: #333;}

/* #letter_backspace.swiping_left, */
#letter_backspace.swiping_right {
    background-color: var(--dark-default-key-bg-color);
}

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



#letter_backspace .x_icon,
#letter_backspace .x_icon:after,
#letter_backspace .x_icon:before {
    background-color: red;
}

#letter_backspace .x_icon,
#letter_backspace .x_icon:after { border: 1px solid black;}


#letter_backspace.swiping_right .x_icon,
#letter_backspace.swiping_right .x_icon:after,
#letter_backspace.swiping_right .x_icon:before {
    background-color: forestgreen;
}

#letter_backspace.swiping_right .x_icon:before { border: 1px solid black;}

#letter_backspace.swiping_left .x_icon,
#letter_backspace.swiping_left .x_icon:after,
#letter_backspace.swiping_left .x_icon:before {
    background-color: forestgreen;
}
#letter_backspace.swiping_left .x_icon { border-right-color: red;}
#letter_backspace.swiping_left .x_icon:before { border: 1px solid black;}