:root {
    --question_bg: rgb(235, 250, 245);
    --text_color: #000000;
    --question_hover: #e4fedb;
    --text_hover: #000000;
    --question_active: #c8fdb8;
    --text_active: #000000;
    --answer_bg: #ffffff;
    --answer_color: #000000;
    --answer_highlight_bg: rgba(228, 254, 219, 0.75);
    --answer_highlight_color: #000000;
    --answer_active_bg: #e4fedb;
    --answer_active_color: #000000;
    --hint_bg: #ffffff;
    --hint_color: #aaaaaa;
    --hint_hover_bg: #ffffff;
    --hint_hover_color: #aaaaaa;
    --answer_hover_bg: #e4fedb;
    --answer_hover_color: #000000;
    --panel_action_bg: #eeeeee;
    --icon_bg: #ceedc8;
    --icon_color: #000000;
    --icon_hover_bg: #ffffff;
    --icon_hover_color: #000000;
    --panel_question_bg: #ceedc8;
    --panel_question_color: #000000;
    --solution_bg: #eeeeee;
    --solution_color: #000000;
    --ship_color: #000000;
    --new_nav_bg: #ffffff;
    --statisticModalBackground: #ffffff;
    --cell_border: 1px solid #000000;
    --riddle_bg: #ffffff;
    --keyboard_switch_bg: #ffffff;
    --keyboard_bg: #ffffff;
    --kakuro_question_bg: #ebfaf5;
}

.darkMode {
    --question_bg: #ceedc8;
    --text_color: #000000;
    --question_hover: #e4fedb;
    --text_hover: #000000;
    --question_active: #c8fdb8;
    --text_active: #000000;
    --answer_bg: #000000;
    --answer_color: #ffffff;
    --answer_highlight_bg: #4E4E4E;
    --answer_highlight_color: #ffffff;
    --answer_active_bg: #858585;
    --answer_active_color: #ffffff;
    --hint_bg: #4E4E4E;
    --hint_color: #aaaaaa;
    --hint_hover_bg: #4E4E4E;
    --hint_hover_color: #aaaaaa;
    --answer_hover_bg: #858585;
    --answer_hover_color: #000000;
    --panel_action_bg: #4E4E4E;
    --icon_bg: #ceedc8;
    --icon_color: #000000;
    --icon_hover_bg: #4E4E4E;
    --icon_hover_color: #000000;
    --panel_question_bg: #ceedc8;
    --panel_question_color: #000000;
    --solution_bg: #4E4E4E;
    --solution_color: #ffffff;
    --ship_color: #000000;
    --new_nav_bg: #4E4E4E;
    --statisticModalBackground: #ffffff;
    --cell_border: #ffffff;
    --riddle_bg: #000000;
    --keyboard_switch_bg: #ffffff;
    --keyboard_bg: #ffffff;
    --svg_invert: invert(100%);
    --kakuro_question_bg: #ebfaf5;
}

.cell .field.multiple_question, .cell .field.single_question {
    background-color: var(--question_bg);
    color: var(--text_color);
}

.cell .field.multiple_question:hover, .cell .field.single_question:hover {
    background-color: var(--question_hover);
}

.cell .field .multiple_question .text:hover, .cell .field .single_question:hover {
    background-color: var(--question_hover);
    color: var(--text_hover);
}

.cell .field .active-question {
    background-color: var(--question_active);
    color: var(--text_active);
}

.cell .field.answer {
    background-color: var(--answer_bg);
    color: var(--answer_color);
}

.cell.highlight .answer {
    background-color: var(--answer_highlight_bg);
    color: var(--answer_highlight_color);
}

.cell.active .answer {
    background-color: var(--answer_active_bg);
    color: var(--answer_active_color);
}

.cell .field.hint {
    background-color: var(--hint_bg);
    color: var(--hint_color);
}

.cell .field.hint:hover {
    background-color: var(--hint_hover_bg);
    color: var(--hint_hover_color);
}

.cell .field.answer:hover {
    background-color: var(--answer_hover_bg);
    color: var(--answer_hover_color);
}

.cell .answer_field .incorrect {
    color: red;
}

.action-panel {
    background-color: var(--panel_action_bg);
}

.action-panel .icon {
    background-color: var(--icon_bg);
    color: var(--icon_color);
}

.action-panel .icon:hover {
    background-color: var(--icon_hover_bg);
    color: var(--icon_hover_color);
}

.question-panel {
    background-color: var(--panel_question_bg);
    color: var(--panel_question_color);
}

.cell .field.solution {
    background-color: var(--solution_bg);
    color: var(--solution_color);
}

#battleship .answer_field .answer {
    color: var(--ship_color);
}

#battleship .answer_field .incorrect {
    color: red;
}

.battleship-panel svg {
    color: var(--ship_color);
}

.ships-list .ship .icon{
    color: var(--ship_color);
}

.ships-list .solved .icon{
    color: #ddd;
}

.cell.hexagon.highlight:hover:before, .cell.hexagon.highlight:hover:after,
.cell.hexagon.highlight:before, .cell.hexagon.highlight:after,
.cell.hexagon:hover:after, .cell.hexagon:hover:before{
    background-color: var(--answer_hover_bg);
}

.cell.hexagon.hex-q:before, .cell.hexagon.hex-q:after {
    background-color: var(--question_bg);
}

.cell.hexagon.hex-q.element-active:before, .cell.hexagon.hex-q.element-active:after,
.cell.hexagon.hex-q.element-active:hover:before, .cell.hexagon.hex-q.element-active:hover:after,
.cell.hexagon.hex-q:hover:before, .cell.hexagon.hex-q:hover:after {
    background-color: var(--question_hover);
}

.cell.hexagon.active:before, .cell.hexagon.active:after, .cell.hexagon.active .answer {
    background-color: var(--answer_active_bg);
}

.new_nav .menu_button {
    background-color: var(--panel_action_bg);
}

.darkMode .new_nav .menu_button img {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.new_nav .dropdown_menu_active {
    background-color: var(--new_nav_bg);
}

.new_nav  .dropdown_menu_active .actionIcon:hover > svg {
    -webkit-filter: var(--svg_invert);
    filter: var(--svg_invert);
}

#app.wordle-app .wordle-modal {
    background-color: var(--statisticModalBackground);
}

#app .border-first-row-thick {
    border-top-color: var(--cell_border);
}

#app .border-last-col-thick {
    border-right-color: var(--cell_border);
}

#app .border-last-row-thick {
    border-bottom-color: var(--cell_border);
}

#app .border-normal  {
    border-bottom-color: var(--cell_border);
    border-right-color: var(--cell_border);
}

#app .border-first-col-thick {
    border-left-color: var(--cell_border);
}

#app .border-left-thick {
    border-left-color: var(--cell_border) !important;
}

#app .border-top-thick {
    border-top-color: var(--cell_border) !important;
}

#app {
    background-color: var(--riddle_bg);
    z-index: -100;
    position: fixed;
}

.toggle-keyboard .choice-button.selected {
    background-color: var(--keyboard_switch_bg);
}

.sudoku-keyboard, #simple-keyboard {
    background-color: var(--keyboard_bg);
}

.vd-wrapper {
    background-color: var(--panel_action_bg) !important;
    color: var(--answer_color);
}

#app .border-first-row {
    border-top-color: var(--cell_border);
}

#app .border-first-col {
    border-left-color: var(--cell_border);
}

#app .cell .field.block {
    background-color: var(--panel_action_bg);
}

#app .question-bg.top-bg {
    border-bottom-color: var(--panel_action_bg);
}

#app .question-bg.top-bg.q-color {
    border-bottom-color: var(--kakuro_question_bg);
}

#app .question-bg.bottom-bg {
    border-top-color: var(--panel_action_bg);
}

#app .question-bg.bottom-bg.q-color {
    border-top-color: var(--kakuro_question_bg);
}

#app .question-bg.bottom-bg.q-color.active {
    border-top-color: var(--question_bg);
}

#app .hexagon:hover:before {
    background-color: var(--answer_active_bg);
}

#app .hexagon:hover:after {
    background-color: var(--answer_active_bg);
}

#app .hexagon:hover{
    background-color: var(--answer_active_bg);
}


#app .hexagon.hex-first-row {
    border-top-color: var(--cell_border) !important;
}

#app .cell.hexagon.hex-q:hover:before, .cell.hexagon.hex-q:hover:after {
    background-color: var(--question_hover) !important;
}

#app .cell.hexagon.active::before, .cell.hexagon.active::after, .cell.hexagon.hex-q.active::before, .cell.hexagon.hex-q.active::after {
    background-color: var(--panel_action_bg) !important;
}

#app .cell.hexagon.active .answer, .cell.hexagon.hex-q.active .answer {
    background-color: var(--panel_action_bg) !important;
}

#app.binero-app .arrow.left::before {
    border-right-color: var(--cell_border);
    border-top-color: var(--cell_border);
}

#app.binero-app .arrow.bottom::before {
    border-top-color: var(--cell_border);
    border-left-color: var(--cell_border);
}

#app.binero-app .arrow.top::before {
    border-right-color: var(--cell_border);
    border-bottom-color: var(--cell_border);
}

#app.binero-app .arrow.right::before {
    border-left-color: var(--cell_border);
    border-bottom-color: var(--cell_border);
}

#app.futoshiki-app .border-full {
    border-color: var(--cell_border);
}

#app.futoshiki-app .more .left:before {
    border-left-color: var(--cell_border);
    border-bottom-color: var(--cell_border);
}

#app.futoshiki-app .more .bottom:before {
    border-bottom-color: var(--cell_border);
    border-right-color: var(--cell_border);
}

#app.futoshiki-app .more .right:before {
    border-top-color: var(--cell_border);
    border-right-color: var(--cell_border);
}

#app.futoshiki-app .more .top:before {
    border-top-color: var(--cell_border);
    border-left-color: var(--cell_border);
}

#app.battleship-app .panel-item {
    color: var(--cell_border);
}

#app.battleship-app .ship .icon {
    filter: var(--svg_invert);
}

#app .help-panel {
    filter: var(--svg_invert);
}

#app.chain_sudoku-app .chain-border {
    border-color: var(--cell_border);
}

#app.chain_sudoku-app .chain-element .upper-axis:before {
    border-left-color: var(--cell_border);
}

#app.chain_sudoku-app .chain-element .axis:before {
    border-bottom-color: var(--cell_border);
}

#app.chain_sudoku-app .chain-element .right:before {
    border-top-color: var(--cell_border);
}

#app.chain_sudoku-app .chain-element .bottom:before {
    border-left-color: var(--cell_border);
}

#app.killer_sudoku-app .sum-field {
    background-color: var(--riddle_bg);
}

#app.killer_sudoku-app .svg-background {
    filter: var(--svg_invert);
}

#app.killer_sudoku-app .cell .field.answer:hover {
    color: var(--cell_border)
}