/** Styles for the theme: Base-Dark */

/* Style for the main element */
.TcHmi_Controls_Beckhoff_TcHmiKeyboard,
.TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-additional-keys-container,
.tchmi-keyboard {
    --tchmi-background: #1b1b1f;
    --tchmi-color: #ffffff;
    --tchmi-backdrop-background: rgba(76, 99, 116, 0.25);
    --tchmi-key-background: linear-gradient(135deg, #35333d, #141415);
    --tchmi-key-color: #ffffff;
    --tchmi-key-background-down: linear-gradient(135deg, #141415 25%, #2A3845);
    --tchmi-key-color-down: #a3b0bb;
    --tchmi-key-background-active: linear-gradient(to bottom right, #4994da, #4162b0);
    --tchmi-key-color-active: #ffffff;
}

.TcHmi_Controls_Beckhoff_TcHmiKeyboard,
.tchmi-keyboard {
    background-color: var(--tchmi-background);
}

.TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-key,
.tchmi-keyboard-template-key {
    background: var(--tchmi-key-background);
    color: var(--tchmi-key-color);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.6);
    border: solid 1px black;
}

/* tchmibutton, not disabled, not operate-disallowed, mouse over, mousedown on it and still pressed */
.TcHmi_Controls_Beckhoff_TcHmiKeyboard:not(.TcHmi_Controls_System_TcHmiControl-disabled):not(.TcHmi_Controls_System_TcHmiControl-operate-disallowed) .TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-key.hover.down,
.TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-additional-keys-container .TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-key.hover.down,
.TcHmi_Controls_Beckhoff_TcHmiKeyboard:not(.TcHmi_Controls_System_TcHmiControl-disabled):not(.TcHmi_Controls_System_TcHmiControl-operate-disallowed) .TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-key.down .TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-key.additional-key.hover,
.TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-key.show-additional-keys,
.tchmi-keyboard:not(.tchmi-control-disabled):not(.tchmi-control-operate-disallowed) .tchmi-keyboard-template-key.hover.down,
.tchmi-keyboard:not(.tchmi-control-disabled):not(.tchmi-control-operate-disallowed) .tchmi-keyboard-template-key.down .tchmi-keyboard-template-key.additional-key.hover,
.tchmi-keyboard-template-key.show-additional-keys {
    background: var(--tchmi-key-background-down);
    color: var(--tchmi-key-color-down);
    box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.3);
}

.TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-key.active,
.tchmi-keyboard-template-key.active {
    background: var(--tchmi-key-background-active);
    color: var(--tchmi-key-color-active);
    box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.4);
}

.TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-backdrop,
.tchmi-keyboard-template-backdrop {
    background-color: var(--tchmi-backdrop-background);
}

.TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-label svg,
.tchmi-keyboard-template-label svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.1px;
}

.TcHmi_Controls_Beckhoff_TcHmiKeyboard-template-textbox {
    border: none;
    box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.02), inset 0px 0px 3px 2px rgba(0,0,0,0.3);
    color: var(--tchmi-color);
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    outline: none;
    resize: none;
}
