/**
* 样式表
* 20250602
* D:/github/20241019/web/css/2025/20250602.css
*/
/**{*/
/*    padding: 0;*/
/*}*/
:root {
    --content-width:1880px
}

body{
   margin: 0 auto;
}

/**
 * 盒子样式
 */
.container-20250602 {
    width: 100%;
    height: 100%;
    user-select: none;
}

h1{
    margin-top: 2rem;
    user-select: none;
    text-align: center;
}

.body-20250602, .footer-20250602{
    width: 100%;
    height: auto;
    margin-top: 2rem;
}

.body-20250602-show,.body-20250602-search {
    width: var(--content-width);
    margin: 0 auto;
    display: flex;
    flex-flow: row nowrap;
}

.body-20250602-search{
    display: none;
    position: fixed;
    top:20px;
    left: 0;
    z-index: 99;
}

.body-20250602-section {
    display: inline-block;
    position: relative;
    width: var(--content-width);
}

.body-20250602-section-1,.body-20250602-section-2,.body-20250602-section-3 {
    display: inline-block;
}

.body-20250602-section-1 {
    width: calc( var(--content-width) * 0.57);
}

.body-20250602-section-2{
    width: calc( var(--content-width) * 0.15);
}

.body-20250602-section-3{
    width: calc( var(--content-width) * 0.15);
}

.body-20250602-row {
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
    flex-flow: row nowrap;
    width: 100%;
    position: relative;
}

.body-20250602-section-2 .body-20250602-row {
    justify-content: center;
}
.body-20250602-section-3 .body-20250602-row {
    justify-content: flex-start;
}

textarea {
    height: 30vh;
    font-size: 2.3rem;
    display: block;
    width: var(--content-width);
}

.keyboard {
    min-width: 2.5rem;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #dddddd;
    height: 50px;
    padding: 3px 8px;
    margin-top: 0.5rem;
    font-size: 1.2rem;
    color: #cccccc;
    background: #53534f;
    border-radius: 6px;
    user-select: none;
    cursor: pointer;
}

.multiple-row {
    font-size: .9rem;
}

.keyboard:not(.pressed):hover{
    background: #000000;
}

circle {
    fill: rgb(240, 240, 240);
    stroke:#dddddd;
}

.pressed{
    background: #1E90FFFF;
}

.lighted{
    color: #00ff00;
}

.clicked {
    background: #2E8B57FF;
}

.lighted circle {
    fill: #00ff00;
}


.keyboard:not(:first-child) {
    margin-left: 0.5rem;
}

.keyboard dd {
    margin-inline-start:0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.keyboard[data-code='Space']{
    width: 22.5rem;
}

.keyboard[data-code='Enter']{
    width: 5.7rem;
}

.keyboard[data-code='End'],.keyboard[data-code='Tab']{
    width: 3rem;
}


.keyboard[data-code='ShiftLeft'], .keyboard[data-code='ShiftRight'] {
    width: 5.7rem;
}

.keyboard[data-code='ControlLeft'], .keyboard[data-code='ControlRight'] {
    width: 4.7rem;
}

.keyboard[data-code='AltLeft'], .keyboard[data-code='AltRight'] {
    width: 3.1rem;
}

.keyboard[data-code='MetaLeft'], .keyboard[data-code='MetaRight'],.keyboard[data-code='PrintScreen'] ,.keyboard[data-code='ScrollLock'] ,.keyboard[data-code='Pause'] {
    width: 3.1rem;
}

.keyboard[data-code='']{
    background: transparent !important;
    border: none;
}

.keyboard[data-code='NumpadEnter'],.keyboard[data-code='NumpadAdd']{
    position: absolute;
    right: 25px;
    bottom: 0;
    height: 116px;
    top: 0px;
    width: 42px;
}

.keyboard-search {
    width: 100%;
    height: 36px;
    line-height: 36px;
    outline-style: none;
    padding: 0 10px;
    border: 1px solid #cccccc;
}

@media only screen and (max-width: 767px) {

}