.elementor-25883 .elementor-element.elementor-element-f21fa3a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}.elementor-25883 .elementor-element.elementor-element-79d8085{text-align:center;}.elementor-25883 .elementor-element.elementor-element-79d8085 .elementor-heading-title{font-size:40px;font-weight:800;}.elementor-25883 .elementor-element.elementor-element-563af0a{text-align:center;}.elementor-25883 .elementor-element.elementor-element-563af0a .elementor-heading-title{font-size:20px;color:#002CF5;}.elementor-25883 .elementor-element.elementor-element-0cce6df{width:var( --container-widget-width, 67% );max-width:67%;--container-widget-width:67%;--container-widget-flex-grow:0;text-align:center;}.elementor-25883 .elementor-element.elementor-element-0cce6df.elementor-element{--align-self:center;}.elementor-25883 .elementor-element.elementor-element-9186cde .elementor-button{background-color:#009FF5;}.elementor-25883 .elementor-element.elementor-element-9186cde .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-25883 .elementor-element.elementor-element-d63adb1{--display:flex;--margin-top:0px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-25883 .elementor-element.elementor-element-1885334 > .elementor-widget-container{padding:0px 20px 0px 0px;}.elementor-25883 .elementor-element.elementor-element-6cff743{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:100px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;}.elementor-25883 .elementor-element.elementor-element-f58db1d{--display:flex;}.elementor-25883 .elementor-element.elementor-element-b4a1dcf > .elementor-widget-container{padding:5px 5px 5px 5px;}.elementor-25883 .elementor-element.elementor-element-b4a1dcf{font-size:16px;}.elementor-25883 .elementor-element.elementor-element-23c36c4{--display:flex;}.elementor-25883 .elementor-element.elementor-element-e10dc91 > .elementor-widget-container{padding:5px 5px 5px 5px;}.elementor-25883 .elementor-element.elementor-element-e10dc91{font-size:16px;}.elementor-25883 .elementor-element.elementor-element-ba39334{--display:flex;}.elementor-25883 .elementor-element.elementor-element-87015cb > .elementor-widget-container{padding:5px 5px 5px 5px;}.elementor-25883 .elementor-element.elementor-element-87015cb{font-size:16px;}.elementor-25883 .elementor-element.elementor-element-e665054{--display:flex;}.elementor-25883 .elementor-element.elementor-element-5194706 > .elementor-widget-container{padding:5px 5px 5px 5px;}.elementor-25883 .elementor-element.elementor-element-5194706{font-size:16px;}.elementor-25883 .elementor-element.elementor-element-c07aca0{--n-accordion-title-font-size:20px;--n-accordion-title-justify-content:space-between;--n-accordion-title-flex-grow:1;--n-accordion-title-icon-order:initial;--n-accordion-item-title-space-between:15px;--n-accordion-border-radius:3px 3px 3px 3px;--n-accordion-icon-size:15px;}.elementor-25883 .elementor-element.elementor-element-c07aca0 > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title{border-style:solid;border-width:0px 0px 1px 0px;border-color:var( --e-global-color-0f11670 );}.elementor-25883 .elementor-element.elementor-element-c07aca0 {--n-accordion-padding:15px 15px 15px 15px;}:where( .elementor-25883 .elementor-element.elementor-element-c07aca0 > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{font-weight:600;}.elementor-25883 .elementor-element.elementor-element-8e0ae17{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-25883 .elementor-element.elementor-element-02cadf5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}.elementor-25883 .elementor-element.elementor-element-3175107 .elementor-heading-title a:hover, .elementor-25883 .elementor-element.elementor-element-3175107 .elementor-heading-title a:focus{color:var( --e-global-color-secondary );}.elementor-25883 .elementor-element.elementor-element-d855508 .column-tabs ul.tabs li{font-size:20px;line-height:42px;}:root{--page-title-display:none;}@media(max-width:1366px){.elementor-25883 .elementor-element.elementor-element-d63adb1{--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-25883 .elementor-element.elementor-element-02cadf5{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-25883 .elementor-element.elementor-element-d855508 .column-tabs ul.tabs li{font-size:15px;}}@media(max-width:1200px){.elementor-25883 .elementor-element.elementor-element-02cadf5{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-25883 .elementor-element.elementor-element-d855508 .column-tabs ul.tabs li{font-size:14px;}}@media(max-width:991px){.elementor-25883 .elementor-element.elementor-element-02cadf5{--margin-top:0px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}}@media(max-width:767px){.elementor-25883 .elementor-element.elementor-element-0cce6df{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-25883 .elementor-element.elementor-element-02cadf5{--margin-top:0px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}.elementor-25883 .elementor-element.elementor-element-d855508 .column-tabs ul.tabs li{font-size:12px;}}/* Start custom CSS for html, class: .elementor-element-1885334 */<style>
#keyboard-tester-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the display box and the full keyboard container */
    font-family: Arial, sans-serif;
    background-color: #f0f0f0; /* Light grey background for the whole widget */
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
    user-select: none; /* Prevent text selection on the widget */
}

#pressed-key-display {
    width: 90%; /* Make display responsive to container width */
    max-width: 700px; /* Max width for the display */
    min-height: 50px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #b0b0b0;
    background-color: #ffffff;
    border-radius: 6px;
    font-size: 1.1em;
    color: #333;
    text-align: center;
    line-height: 1.4;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

#full-keyboard-layout {
    display: flex; /* Arrange main, middle, and numpad sections in a row */
    justify-content: center; /* Center sections if there's extra space */
    gap: 25px; /* Space between main keyboard, middle cluster, and numpad */
    width: auto; /* Let it grow based on content */
}

#main-keyboard-section,
#middle-cluster-section,
#numpad-section {
    display: flex;
    flex-direction: column; /* Rows within each section will stack vertically */
    gap: 4px; /* Space between rows within a section */
}

.keyboard-row {
    display: flex;
    gap: 4px; /* Space between keys in a row */
}

.key {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px; /* Base height for 1U key */
    background-color: #fff;
    border: 1px solid #ccc;
    border-bottom: 3px solid #aaa; /* 3D effect */
    border-radius: 4px;
    font-size: 13px; /* Adjusted for potentially smaller keys */
    font-weight: normal;
    cursor: default; /* Not clickable by default for testing physical keys */
    box-shadow: 0 1px 0 #bbb;
    transition: background-color 0.05s ease-in-out, transform 0.05s ease-in-out, box-shadow 0.05s ease-in-out;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 0 5px; /* Horizontal padding for text inside keys */
    white-space: pre; /* Preserve spaces for keys like "Num Lock" */
}

.key.active {
    background-color: #4CAF50; /* Green when active */
    color: white;
    transform: translateY(2px); /* Press down effect */
    border-bottom-width: 1px;
    box-shadow: 0 0px 0 #3e8e41;
}

/* Key Sizes (1U = approx 45-50px width, adjust base and multipliers as needed) */
.key-1u { width: 48px; }
.key-1-25u { width: calc(48px * 1.25 + 4px * 0.25); } /* (1U * 1.25) + (gap * 0.25) */
.key-1-5u { width: calc(48px * 1.5 + 4px * 0.5); }
.key-1-75u { width: calc(48px * 1.75 + 4px * 0.75); }
.key-2u { width: calc(48px * 2 + 4px * 1); }
.key-2-25u { width: calc(48px * 2.25 + 4px * 1.25); }
.key-2-75u { width: calc(48px * 2.75 + 4px * 1.75); }
.key-space { width: calc(48px * 6.25 + 4px * 5.25); } /* Standard 6.25U spacebar */

/* Specific Grouping/Spacers */
.key-f-group-spacer { margin-left: 24px; } /* Space between F4-F5 and F8-F9 */

/* Middle Cluster (Editing & Arrows) */
#middle-cluster-section {
    align-items: flex-start; /* Align items to the start of the cross axis */
}
.editing-row {
    justify-content: flex-start;
}
.arrow-keys-container {
    margin-top: 18px; /* Space above arrow keys */
    display: flex;
    flex-direction: column; /* Stack arrow rows */
    gap: 4px;
    align-items: center; /* Center the up arrow relative to L/D/R row */
}
.arrow-keys-container .keyboard-row {
    justify-content: center; /* Center keys within arrow rows */
}
.spacer-key {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none; /* Make it non-interactive */
}


/* Numpad Specifics */
#numpad-section .keyboard-row {
    justify-content: flex-start;
}
.key-numpad-plus { height: calc(45px * 2 + 4px * 1); } /* Numpad + is often 2U tall */
.key-numpad-enter { height: calc(45px * 2 + 4px * 1); } /* Numpad Enter is often 2U tall */
.key-2u-numpad0 { width: calc(48px * 2 + 4px * 1); } /* Numpad 0 is often 2U wide */

/* Adjusting Numpad + and Enter positioning when they span two rows */
/* This requires the HTML for these keys to be in the correct row initially,
   and then flex properties on their parent row if they are alone.
   A simpler way for this example is to have them in one row and just be tall.
   If they are the only item in their column part that needs to span, CSS Grid on #numpad-section would be better.
   For this flexbox example, key-numpad-plus and key-numpad-enter are placed in rows.
   If Numpad + is in a row with 3 other keys, and needs to span where a key below it would be,
   we'd need to adjust its containing row's items or use absolute positioning / grid.
   The current HTML places them to span rows by being the only tall item in their respective "column"
   within the flex row structure. This means that the keys Numpad9 and Numpad6 rows will determine their horizontal position.
*/
#numpad-section .keyboard-row:nth-child(2), /* Row with 7,8,9,+ */
#numpad-section .keyboard-row:nth-child(4)  /* Row with 1,2,3,Enter */
{
    /* Align items to the top for rows containing tall keys, so other keys don't stretch */
    align-items: flex-start;
}
</style>/* End custom CSS */