/* Dark theme overrides */
html[data-theme="dark"] body {
    background-color: #111214;
}

html[data-theme="dark"] #background {
    background-color: #111214;
}

html[data-theme="dark"] #topMenu .menu {
    background-color: #1c1c1c;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] #topMenu .openButton:hover {
    background-color: #2b2b2b;
}

html[data-theme="dark"] #topMenu .menu .buttons .version .rect {
    background-color: #444444;
}

html[data-theme="dark"] #topMenu .menu .buttons .version .corner {
    border-color: transparent #444444 transparent transparent;
}

html[data-theme="dark"] #topMenu .menu .buttons .whatIsIt .text,
html[data-theme="dark"] #topMenu .menu .buttons .home .text,
html[data-theme="dark"] #topMenu .menu .buttons .themeToggle .text,
html[data-theme="dark"] #topMenu .menu .buttons .language .text {
    color: #e6e6e6;
}

html[data-theme="dark"] #topMenu .menu .buttons .whatIsIt .line,
html[data-theme="dark"] #topMenu .menu .buttons .home .line,
html[data-theme="dark"] #topMenu .menu .buttons .themeToggle .line,
html[data-theme="dark"] #topMenu .menu .buttons .language .line {
    background-color: #ffcd2f;
}

html[data-theme="dark"] #topMenu .menu .buttons .language .choose .box {
    background-color: #2a2a2a;
}

html[data-theme="dark"] #topMenu .menu .buttons .language .choose .corner {
    border-color: transparent transparent #2a2a2a transparent;
}

html[data-theme="dark"] #topMenu .menu .buttons .language .choose .english,
html[data-theme="dark"] #topMenu .menu .buttons .language .choose .chinese {
    color: #e6e6e6;
}

html[data-theme="dark"] #topMenu .menu .buttons .language .choose .chinese {
    border-color: #e6e6e6;
}

html[data-theme="dark"] #topMenu .menu .buttons .language .choose .english:hover,
html[data-theme="dark"] #topMenu .menu .buttons .language .choose .chinese:hover {
    border-color: #e6e6e6;
}

html[data-theme="dark"] #topMenu .menu .buttons .close {
    background-color: #1c1c1c;
}

html[data-theme="dark"] #topMenu .menu .buttons .close:hover {
    background-color: #2b2b2b;
}

html[data-theme="dark"] #timerApp {
    background-color: #24272c;
}

html[data-theme="dark"] #timingUi .clock * {
    color: #94b4c1;
}

html[data-theme="dark"] #timingUi .changeClockInput .minute .input,
html[data-theme="dark"] #timingUi .changeClockInput .seconds .input {
    color: #94b4c1;
}

html[data-theme="dark"] #titleBarUi .maximizeButton {
    background-image: url(../../../asset/image/other/maximize_2.ico);
}

html[data-theme="dark"] #countdownUi .time .timeText,
html[data-theme="dark"] #countdownUi .paused .timeText {
    color: #f4e3b0;
}

html[data-theme="dark"] #footer {
    color: #b2b6bb;
}

html[data-theme="dark"] #quitModal .overlay {
    background-color: rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] #quitModal .panel {
    background-color: #1f2226;
    color: #e6e6e6;
    box-shadow: 0px 16px 40px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] #quitModal .message {
    color: #b7bcc2;
}

html[data-theme="dark"] #quitModal .buttons .cancelButton {
    background-color: #2c2f34;
    color: #e6e6e6;
}