.keyboardcontainer {
    --tchmi-border-color: #666666;
    --tchmi-keyboard-background: #d9dee2;
    --tchmi-additional-keys-background: #fbfbfb;
    --tchmi-key-background: linear-gradient(135deg, #eff1f3, #aeb9c2);
    --tchmi-text-color: #4794da;
    --tchmi-key-shadow: 0px 0px 5px 0px rgba(0,0,0,0.6);
    --tchmi-active-key-background: linear-gradient(135deg, #4162b0, #4994da);
    --tchmi-active-text-color: #ffffff;
    --tchmi-active-key-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.4);
}

@media (prefers-color-scheme: dark) {
    .keyboardcontainer {
        --tchmi-border-color: #666666;
        --tchmi-keyboard-background: #1b1b1f;
        --tchmi-additional-keys-background: #252526;
        --tchmi-key-background: linear-gradient(135deg, #35333d, #141415);
        --tchmi-text-color: #ffffff;
        --tchmi-key-shadow: 0px 0px 5px 0px rgba(0,0,0,0.6);
        --tchmi-active-key-background: linear-gradient(135deg, #141415 25%, #2a3845);
        --tchmi-active-text-color: #a3b0bb;
        --tchmi-active-key-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.4);
    }
}

.keyboardcontainer {
    margin-bottom: 0;
    transition: margin-bottom 0.5s;
    width: 100%;
    max-width: 792px;
    align-self: center;
    z-index: 150;
    position: relative;
    bottom: 0px;
}

.keyboard-toggle {
    position: absolute;
    right: 0;
    top: -48px;
    width: 50px;
    height: 49px;
    border: 1px solid var(--tchmi-border-color);
    border-bottom: none;
    background: var(--tchmi-keyboard-background);
    padding: 10px;
    box-sizing: border-box;
}

    .keyboard-toggle svg {
        fill: none;
        stroke: var(--tchmi-text-color);
        stroke-width: 1px;
    }

.keyboardcontainer .shown-icon {
    opacity: 1;
    transition: opacity 0.5s;
}

.keyboardcontainer .hidden-icon {
    opacity: 0;
    transition: opacity 0.5s;
}

.keyboardcontainer.hidden .shown-icon {
    opacity: 0;
}

.keyboardcontainer.hidden .hidden-icon {
    opacity: 1;
}

.tchmi-keyboard {
    padding: 10px;
    border: 1px solid var(--tchmi-border-color);
    border-bottom: none;
    background: var(--tchmi-keyboard-background);
}

.tchmi-keyboard-template {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tchmi-keyboard-template-padding-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.tchmi-keyboard-template-key {
    position: absolute;
    box-sizing: border-box;

    background: var(--tchmi-key-background);
    color: var(--tchmi-text-color);
    box-shadow: var(--tchmi-key-shadow);
}

.tchmi-keyboard-template-key .tchmi-keyboard-template-key.additional-key {
    display: none;
    box-sizing: content-box;
}

.tchmi-keyboard-template-key.show-additional-keys .tchmi-keyboard-template-key.additional-key {
    display:block;
}

.tchmi-keyboard-template-key .tchmi-keyboard-template-backdrop {
    pointer-events: none;
    visibility: hidden;
    position: absolute;
    padding: 8px;
    transform: translate(-8px, -8px);
    border: 1px solid var(--tchmi-additional-keys-background);
    background: var(--tchmi-additional-keys-background);
}

.tchmi-keyboard-template-key.show-additional-keys .tchmi-keyboard-template-backdrop {
    visibility: visible;
}

.tchmi-keyboard-template-key.show-additional-keys {
    z-index: 1;
}

.tchmi-keyboard-template-label {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    overflow: hidden;
    pointer-events: none;
}

.tchmi-keyboard-template-label.top {
    align-items: flex-start;
}

.tchmi-keyboard-template-label.bottom {
    align-items: flex-end;
}

.tchmi-keyboard-template-label.left {
    justify-content: flex-start;
}

.tchmi-keyboard-template-label.right {
    justify-content: flex-end;
}

.tchmi-keyboard-template-label.show-always {
    display: flex;
}

.tchmi-keyboard.default-active .tchmi-keyboard-template-label.show-default {
    display: flex;
}

.tchmi-keyboard.shift-active:not(.capslock-active) .tchmi-keyboard-template-label.show-shift {
    display: flex;
}

.tchmi-keyboard.shift-active.capslock-active .tchmi-keyboard-template-key[data-no-caps-lock=true] .tchmi-keyboard-template-label.show-shift {
    display: flex;
}

.tchmi-keyboard.shift-active.capslock-active:not(.control-active):not(.alt-active):not(.altgr-active) .tchmi-keyboard-template-key:not([data-no-caps-lock=true]) .tchmi-keyboard-template-label.show-default {
    display: flex;
}

.tchmi-keyboard.control-active .tchmi-keyboard-template-label.show-control {
    display: flex;
}

.tchmi-keyboard.alt-active .tchmi-keyboard-template-label.show-alt {
    display: flex;
}

.tchmi-keyboard.altgr-active .tchmi-keyboard-template-label.show-altgr {
    display: flex;
}

.tchmi-keyboard.meta-active .tchmi-keyboard-template-label.show-meta {
    display: flex;
}

.tchmi-keyboard.capslock-active .tchmi-keyboard-template-label.show-capslock {
    display: flex;
}

.tchmi-keyboard.capslock-active:not(.shift-active) .tchmi-keyboard-template-key:not([data-no-caps-lock=true]) .tchmi-keyboard-template-label.show-shift {
    display: flex;
}

.tchmi-keyboard.numlock-active .tchmi-keyboard-template-label.show-numlock {
    display: flex;
}

.tchmi-keyboard.default-active .tchmi-keyboard-template-label.hide-default {
    display: none;
}

.tchmi-keyboard.shift-active:not(.capslock-active) .tchmi-keyboard-template-label.hide-shift {
    display: none;
}

.tchmi-keyboard.shift-active.capslock-active .tchmi-keyboard-template-key[data-no-caps-lock=true] .tchmi-keyboard-template-label.hide-shift {
    display: none;
}

.tchmi-keyboard.shift-active.capslock-active:not(.control-active):not(.alt-active):not(.altgr-active) .tchmi-keyboard-template-key:not([data-no-caps-lock=true]) .tchmi-keyboard-template-label.hide-default {
    display: none;
}

.tchmi-keyboard.control-active .tchmi-keyboard-template-label.hide-control {
    display: none;
}

.tchmi-keyboard.alt-active .tchmi-keyboard-template-label.hide-alt {
    display: none;
}

.tchmi-keyboard.altgr-active .tchmi-keyboard-template-label.hide-altgr {
    display: none;
}

.tchmi-keyboard.meta-active .tchmi-keyboard-template-label.hide-meta {
    display: none;
}

.tchmi-keyboard.capslock-active .tchmi-keyboard-template-label.hide-capslock {
    display: none;
}

.tchmi-keyboard.capslock-active:not(.shift-active) .tchmi-keyboard-template-key:not([data-no-caps-lock=true]) .tchmi-keyboard-template-label.hide-shift {
    display: none;
}

.tchmi-keyboard.numlock-active .tchmi-keyboard-template-label.hide-numlock {
    display: none;
}

.tchmi-keyboard .tchmi-keyboard-template-key.hover.down,
.tchmi-keyboard .tchmi-keyboard-template-key.down .tchmi-keyboard-template-key.additional-key.hover,
.tchmi-keyboard-template-key.show-additional-keys,
.tchmi-keyboard-template-key.active {
    background: var(--tchmi-active-key-background);
    color: var(--tchmi-active-text-color);
    box-shadow: var(--tchmi-active-key-shadow);
}

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