/* Styles for Block A */
.block-a {
    width: 463px; /* Width of the block */
    height: 140px; /* Height of the block */
    background-color: #DFF0D8; /* Light green background */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Curved edges */
    position: absolute; /* Position it independently */
    top: 820px; /* 20px below Block 1 (Block 1 height is 630px) */
    left: 13px; /* Center horizontally */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    color: black; /* Text color */
    font-family: Arial, sans-serif; /* Font family */
    font-size: 14px; /* Font size */
    font-weight: bold; /* Bold text */
    text-align: center; /* Center-align text */
    z-index: 1; /* Ensure it appears above other elements */
}

/* Styles for Rectangle 1 in Block A */
.block-a .history-rectangle-1 {
    width: 354px; /* Width of the rectangle */
    height: 34px; /* Height of the rectangle */
    background-color: #eee; /* Background color */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    position: absolute; /* Position relative to Block A */
    right: 2px; /* Align 2px from the left border of Block A */
    top: 3px; /* 3px margin from the top border of Block A */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Align text to the left */
    text-align: left; /* Ensure text aligns to the left */
    padding-left: 5px; /* Add padding to prevent text from touching the left border */
    padding-right: 5px;
    box-sizing: border-box; /* Include padding in width calculation */
    overflow-x: hidden; /* Hide horizontal scrollbar by default */
    overflow-y: hidden; /* Hide vertical overflow */
    text-overflow: clip; /* Prevent ellipsis or clipping */
    line-height: 34px; /* Match the height of the rectangle for proper alignment */
    height: calc(34px + 6px);
    font-weight: normal; /* Normal font weight */
}

.block-a .history-rectangle-1:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover if content overflows */
}

.block-a .history-rectangle-1::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
    border-radius: 1px; /* Rounded edges */
}

.block-a .history-rectangle-1::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
    margin-left: 6px; /* Align with the left border of the rectangle */
    margin-right: 6px; /* Align with the right border of the rectangle */
}

/* Scrollbar styling for Rectangle 4 in Block 2 */
.block-a .history-rectangle-1::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

.block-a .history-rectangle-1::-webkit-scrollbar-thumb {
    background-color: #aaa; /* Light grey scrollbar thumb */
    border-radius: 1px; /* Rounded edges */
}

.block-a .history-rectangle-1::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

/* Styles for Rectangle 2 in Block A */
.block-a .history-rectangle-2 {
    width: 354px; /* Width of the rectangle */
    height: 34px; /* Height of the rectangle */
    background-color: #eee; /* Background color */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    position: absolute; /* Position relative to Block A */
    right: 2px; /* Align 2px from the left border of Block A */
    top: 51px; /* 5px gap below Rectangle 1 (34px height + 5px gap + 3px top margin) */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Align text to the left */
    text-align: left; /* Ensure text aligns to the left */
    padding-left: 5px; /* Add padding to prevent text from touching the left border */
    padding-right: 5px;
    box-sizing: border-box; /* Include padding in width calculation */
    overflow-x: hidden; /* Hide horizontal scrollbar by default */
    overflow-y: hidden; /* Hide vertical overflow */
    text-overflow: clip; /* Prevent ellipsis or clipping */
    line-height: 34px; /* Match the height of the rectangle for proper alignment */
    height: calc(34px + 6px);
    font-weight: normal; /* Normal font weight */
}

.block-a .history-rectangle-2:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover if content overflows */
}

.block-a .history-rectangle-2::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
    border-radius: 1px; /* Rounded edges */
}

.block-a .history-rectangle-2::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
    margin-left: 6px; /* Align with the left border of the rectangle */
    margin-right: 6px; /* Align with the right border of the rectangle */
}

/* Scrollbar styling for Rectangle 4 in Block 2 */
.block-a .history-rectangle-2::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

.block-a .history-rectangle-2::-webkit-scrollbar-thumb {
    background-color: #aaa; /* Light grey scrollbar thumb */
    border-radius: 1px; /* Rounded edges */
}

.block-a .history-rectangle-2::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

/* Styles for Rectangle 3 in Block A */
.block-a .history-rectangle-3 {
    width: 351px; /* Width of the rectangle */
    height: 34px; /* Height of the rectangle */
    background-color: #eee; /* Background color */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    position: absolute; /* Position relative to Block A */
    right: 2px; /* Align 2px from the left border of Block A */
    bottom: 3px; /* 3px margin from the bottom border of Block A */
}

/* Styles for the # cell in Rectangle 3 */
.block-a .history-rectangle-3 .cell {
    width: 34px; /* Width of the cell */
    height: 34px; /* Height of the cell matches the rectangle */
    background-color: #eee; /* Grey background */
    border-radius: 8px 0 0 8px; /* Rounded edges on the left side */
    border-right: 1px solid #ccc; /* Right border */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    font-size: 14px; /* Font size for the # symbol */
    font-weight: bold; /* Make the # symbol bold */
    position: absolute; /* Position relative to the rectangle */
    left: 0; /* Align to the left-most border of the rectangle */
    top: 0; /* Align to the top of the rectangle */
}

/* Styles for the editable area in Rectangle 3 */
.block-a .history-rectangle-3 .rectangle-editable-area {
    font-size: 14px; /* Set font size to 14px */
    text-align: left; /* Align text to the left */
    display: flex; /* Use flexbox for vertical alignment */
    align-items: center; /* Vertically center the text */
    padding-left: 5px; /* Add padding for spacing from the left */
    white-space: nowrap; /* Prevent text wrapping */
    overflow-x: hidden; /* Hide horizontal scrollbar by default */
    overflow-y: hidden; /* Hide vertical scrollbar */
    text-overflow: clip; /* Prevent ellipsis or clipping */
    caret-color: #007BFF; /* Blue caret color */
    outline: none; /* Remove default outline */
    box-sizing: border-box; /* Include padding in dimensions */
    height: 100%; /* Full height of the rectangle */
    background-color: transparent; /* Transparent background */
    left: 34px;
    right: 6px;
    font-weight: normal; ;
}

/* Show horizontal scrollbar on hover */
.block-a .history-rectangle-3 .rectangle-editable-area:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover */
}

/* Hide scrollbar when not focused */
.block-a .history-rectangle-3 .rectangle-editable-area:not(:focus) {
    overflow-x: hidden; /* Hide horizontal scrollbar */
}

/* Scrollbar styling */
.block-a .history-rectangle-3 .rectangle-editable-area::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

.block-a .history-rectangle-3 .rectangle-editable-area::-webkit-scrollbar-thumb {
    background-color: #aaa; /* Light grey scrollbar thumb */
    border-radius: 1px; /* Rounded edges */
}

.block-a .history-rectangle-3 .rectangle-editable-area::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

/* Styles for labels inside Block A */
.rectangle-label {
    position: absolute;
    font-size: 13px; /* Font size for the labels */
    font-weight: bold; /* Bold text */
    color: black; /* Text color */
    text-align: left; /* Align text to the left */
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: flex-start; /* Align text horizontally */
    height: 34px; /* Match the height of the rectangles */
    line-height: 1; /* Ensure proper vertical alignment */
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Prevent overflow */
    text-overflow: ellipsis; /* Add ellipsis if text overflows */
}

/* Label for Rectangle 1 */
.label-pow-block-hash {
    left: 5px; /* 2px away from the left border of Block A */
    top: 4px; /* Align vertically with Rectangle 1 */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Prevent overflow */
    text-overflow: ellipsis; /* Add ellipsis if text overflows */
}

/* Label for Rectangle 2 */
.label-prev-pow-block-hash {
    left: 5px; /* 2px away from the left border of Block A */
    top: 53px; /* Align vertically with Rectangle 2 */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Prevent overflow */
    text-overflow: ellipsis; /* Add ellipsis if text overflows */
}

/* Label for Rectangle 3 */
.label-pow-block {
    left: 5px; /* 2px away from the left border of Block A */
    bottom: 5px; /* Align vertically with Rectangle 3 */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Prevent overflow */
    text-overflow: ellipsis; /* Add ellipsis if text overflows */
}

/* Styles for the heading above Block A */
.block-a-heading {
    position: absolute;
    top: 770px; /* 1px above Block A and accounting for margin */
    left: 13px; /* Align with Block A */
    font-size: 22px; /* Font size for the heading */
    font-weight: bold; /* Bold text */
    color: black; /* Text color */
    font-family: Arial, sans-serif; /* Font family */
    margin: 0; /* Remove default margin */
}

/* Styles for Block B */
.block-b {
    width: 463px; /* Width of the block */
    height: 140px; /* Height of the block */
    background-color: #DFF0D8; /* Light green background */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Curved edges */
    position: absolute; /* Position it independently */
    top: 1050px; /* 40px below Block A */
    left: 13px; /* Align with Block A */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    color: black; /* Text color */
    font-family: Arial, sans-serif; /* Font family */
    font-size: 14px; /* Font size */
    font-weight: bold; /* Bold text */
    text-align: center; /* Center-align text */
    z-index: 1; /* Ensure it appears above other elements */
}

/* Styles for Rectangle 1 in Block B */
.block-b .history-rectangle-1 {
    width: 354px; /* Width of the rectangle */
    height: 34px; /* Height of the rectangle */
    background-color: #eee; /* Background color */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    position: absolute; /* Position relative to Block B */
    right: 2px; /* Align 2px from the left border of Block B */
    top: 3px; /* 3px margin from the top border of Block B */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Align text to the left */
    text-align: left; /* Ensure text aligns to the left */
    padding-left: 5px; /* Add padding to prevent text from touching the left border */
    padding-right: 5px;
    box-sizing: border-box; /* Include padding in width calculation */
    overflow-x: hidden; /* Hide horizontal scrollbar by default */
    overflow-y: hidden; /* Hide vertical overflow */
    text-overflow: clip; /* Prevent ellipsis or clipping */
    line-height: 34px; /* Match the height of the rectangle for proper alignment */
    height: calc(34px + 6px);
    font-weight: normal; /* Normal font weight */
}

.block-b .history-rectangle-1:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover if content overflows */
}

.block-b .history-rectangle-1::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
    border-radius: 1px; /* Rounded edges */
}

.block-b .history-rectangle-1::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
    margin-left: 6px; /* Align with the left border of the rectangle */
    margin-right: 6px; /* Align with the right border of the rectangle */
}

.block-b .history-rectangle-1::-webkit-scrollbar-thumb {
    background-color: #aaa; /* Light grey scrollbar thumb */
    border-radius: 1px; /* Rounded edges */
}

/* Styles for Rectangle 2 in Block B */
.block-b .history-rectangle-2 {
    width: 354px; /* Width of the rectangle */
    height: 34px; /* Height of the rectangle */
    background-color: #eee; /* Background color */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    position: absolute; /* Position relative to Block B */
    right: 2px; /* Align 2px from the left border of Block B */
    top: 51px; /* 5px gap below Rectangle 1 (34px height + 5px gap + 3px top margin) */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Align text to the left */
    text-align: left; /* Ensure text aligns to the left */
    padding-left: 5px; /* Add padding to prevent text from touching the left border */
    padding-right: 5px;
    box-sizing: border-box; /* Include padding in width calculation */
    overflow-x: hidden; /* Hide horizontal scrollbar by default */
    overflow-y: hidden; /* Hide vertical overflow */
    text-overflow: clip; /* Prevent ellipsis or clipping */
    line-height: 34px; /* Match the height of the rectangle for proper alignment */
    height: calc(34px + 6px);
    font-weight: normal; /* Normal font weight */
}

.block-b .history-rectangle-2:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover if content overflows */
}

.block-b .history-rectangle-2::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
    border-radius: 1px; /* Rounded edges */
}

.block-b .history-rectangle-2::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
    margin-left: 6px; /* Align with the left border of the rectangle */
    margin-right: 6px; /* Align with the right border of the rectangle */
}

.block-b .history-rectangle-2::-webkit-scrollbar-thumb {
    background-color: #aaa; /* Light grey scrollbar thumb */
    border-radius: 1px; /* Rounded edges */
}

/* Styles for Rectangle 3 in Block B */
.block-b .history-rectangle-3 {
    width: 351px; /* Width of the rectangle */
    height: 34px; /* Height of the rectangle */
    background-color: #eee; /* Background color */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    position: absolute; /* Position relative to Block B */
    right: 2px; /* Align 2px from the left border of Block B */
    bottom: 3px; /* 3px margin from the bottom border of Block B */
}

/* Styles for the # cell in Rectangle 3 */
.block-b .history-rectangle-3 .cell {
    width: 34px; /* Width of the cell */
    height: 34px; /* Height of the cell matches the rectangle */
    background-color: #eee; /* Grey background */
    border-radius: 8px 0 0 8px; /* Rounded edges on the left side */
    border-right: 1px solid #ccc; /* Right border */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    font-size: 14px; /* Font size for the # symbol */
    font-weight: bold; /* Make the # symbol bold */
    position: absolute; /* Position relative to the rectangle */
    left: 0; /* Align to the left-most border of the rectangle */
    top: 0; /* Align to the top of the rectangle */
}

/* Styles for the editable area in Rectangle 3 */
.block-b .history-rectangle-3 .rectangle-editable-area {
    font-size: 14px; /* Set font size to 14px */
    text-align: left; /* Align text to the left */
    display: flex; /* Use flexbox for vertical alignment */
    align-items: center; /* Vertically center the text */
    padding-left: 5px; /* Add padding for spacing from the left */
    white-space: nowrap; /* Prevent text wrapping */
    overflow-x: hidden; /* Hide horizontal scrollbar by default */
    overflow-y: hidden; /* Hide vertical scrollbar */
    text-overflow: clip; /* Prevent ellipsis or clipping */
    caret-color: #007BFF; /* Blue caret color */
    outline: none; /* Remove default outline */
    box-sizing: border-box; /* Include padding in dimensions */
    height: 100%; /* Full height of the rectangle */
    background-color: transparent; /* Transparent background */
    left: 34px;
    right: 6px;
    font-weight: normal;
}

/* Show horizontal scrollbar on hover */
.block-b .history-rectangle-3 .rectangle-editable-area:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover */
}

/* Hide scrollbar when not focused */
.block-b .history-rectangle-3 .rectangle-editable-area:not(:focus) {
    overflow-x: hidden; /* Hide horizontal scrollbar */
}

/* Scrollbar styling */
.block-b .history-rectangle-3 .rectangle-editable-area::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

.block-b .history-rectangle-3 .rectangle-editable-area::-webkit-scrollbar-thumb {
    background-color: #aaa; /* Light grey scrollbar thumb */
    border-radius: 1px; /* Rounded edges */
}

.block-b .history-rectangle-3 .rectangle-editable-area::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

/* Styles for the heading above Block B */
.block-b-heading {
    position: absolute;
    top: 995px; /* 1px above Block B */
    left: 13px; /* Align with Block B */
    font-size: 22px; /* Font size for the heading */
    font-weight: bold; /* Bold text */
    color: black; /* Text color */
    font-family: Arial, sans-serif; /* Font family */
    margin: 0; /* Remove default margin */
}

/* Styles for Block C */
.block-c {
    width: 450px; /* Width of the block */
    height: 130px; /* Height of the block */
    background-color: white; /* White background */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    position: absolute; /* Position relative to Block A */
    top: 5px; /* Position above Block A */
    left: 7px; /* Center align with Block A */
    display: none; /* Initially hidden */
    overflow: auto; /* Enable both horizontal and vertical scrollbars */
    text-align: left; /* Align text to the left */
    padding: 10px; /* Add padding for text spacing */
    box-sizing: border-box; /* Include padding in dimensions */
    z-index: 2; /* Ensure it appears above Block A */
    font-size: 12px; /* Set font size to 12px */
    overflow-x: hidden; /* Hide horizontal scrollbar by default */
}

.block-c div {
    margin-top: 2px; /* Add margin-top of 2px */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center text */
    gap: 5px; /* Add spacing between heading and text */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Prevent overflow */
    text-overflow: ellipsis; /* Add ellipsis if text overflows */
}

/* Show Block C when hovering over Block A */
.block-a:hover .block-c {
    display: block; /* Show Block C */
}

/* Scrollbar styling for Block C */
.block-c::-webkit-scrollbar {
    width: 2px; /* Width of vertical scrollbar */
    height: 2px; /* Height of the horizontal scrollbar */
}

.block-c::-webkit-scrollbar-thumb {
    background-color: #aaa; /* Light grey scrollbar thumb */
    border-radius: 4px; /* Rounded edges */
}

.block-c::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
    margin-left: 6px; /* Align with the left border of the rectangle */
    margin-right: 6px; /* Align with the right border of the rectangle */
    margin-top: 6px; /* Align with the top border of the rectangle */
    margin-bottom: 6px; /* Align with the bottom border of the rectangle */
}

.block-c:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover */
}

/* Styles for Block D */
.block-d {
    width: 450px; /* Width of the block */
    height: 130px; /* Height of the block */
    background-color: white; /* White background */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    position: absolute; /* Position relative to Block B */
    top: 5px; /* Position above Block B */
    left: 7px; /* Center align with Block B */
    display: none; /* Initially hidden */
    overflow: auto; /* Enable both horizontal and vertical scrollbars */
    text-align: left; /* Align text to the left */
    padding: 10px; /* Add padding for text spacing */
    box-sizing: border-box; /* Include padding in dimensions */
    z-index: 2; /* Ensure it appears above Block B */
    overflow-x: hidden; /* Hide horizontal scrollbar by default */
}

.block-d:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover */
}

.block-d::-webkit-scrollbar {
    width: 2px; /* Width of vertical scrollbar */
    height: 2px; /* Height of horizontal scrollbar */
}

.block-d::-webkit-scrollbar-thumb {
    background-color: #aaa; /* Light grey scrollbar thumb */
    border-radius: 4px; /* Rounded edges */
}

.block-d::-webkit-scrollbar-thumb:hover {
    background-color: #888; /* Darker grey on hover */
}

.block-d::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
    margin-left: 6px; /* Align with the left border of the rectangle */
    margin-right: 6px; /* Align with the right border of the rectangle */
    margin-top: 6px; /* Align with the top border of the rectangle */
    margin-bottom: 6px; /* Align with the bottom border of the rectangle */
}

.block-d div {
    margin-top: 2px; /* Match Block C's margin-top */
    align-items: center; /* Vertically center text */
    white-space: nowrap; /* Prevent text wrapping */
    text-overflow: ellipsis; /* Add ellipsis if text overflows */
}

/* Ensure consistent font size and spacing for text in Block D */
.block-d div > div {
    font-size: 12px; /* Set font size to 12px */
    text-align: left; /* Align text to the left */
    letter-spacing: normal; /* Ensure proper spacing */
}

/* Ensure headings in Block D remain bold */
.block-d div > strong {
    font-weight: bold; /* Keep headings bold */
    margin-right: 5px; /* Add spacing between heading and text */
}

/* Styles for Block A1 (replica of Block A, 5px to the right) */
.block-a1 {
    width: 463px;
    height: 140px;
    background-color: #DFF0D8;
    border: 2px solid #D3D3D3;
    border-radius: 10px;
    position: absolute;
    /* Place 5px to the right of Block A */
    top: 820px;
    left: 492.5px !important; /* 13px (block-a left) + 463px (block-a width) + 5px gap */
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    z-index: 10; /* Increase z-index to ensure visibility */
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Replicate all rectangle and label styles for .block-a1 */
.block-a1 .history-rectangle-1,
.block-a1 .history-rectangle-2 {
    width: 354px;
    height: 34px;
    background-color: #eee;
    border: 2px solid #D3D3D3;
    border-radius: 10px;
    position: absolute;
    right: 2px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: clip;
    line-height: 34px;
    height: calc(34px + 6px);
    font-weight: normal;
}
.block-a1 .history-rectangle-1 { top: 3px; }
.block-a1 .history-rectangle-2 { top: 51px; }

.block-a1 .history-rectangle-1:hover,
.block-a1 .history-rectangle-2:hover {
    overflow-x: auto;
}
.block-a1 .history-rectangle-1::-webkit-scrollbar,
.block-a1 .history-rectangle-2::-webkit-scrollbar {
    height: 2px;
    border-radius: 1px;
}
.block-a1 .history-rectangle-1::-webkit-scrollbar-thumb,
.block-a1 .history-rectangle-2::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 1px;
}
.block-a1 .history-rectangle-1::-webkit-scrollbar-track,
.block-a1 .history-rectangle-2::-webkit-scrollbar-track {
    background: transparent;
    margin-left: 6px;
    margin-right: 6px;
}

.block-a1 .history-rectangle-3 {
    width: 351px;
    height: 34px;
    background-color: #eee;
    border: 2px solid #D3D3D3;
    border-radius: 10px;
    position: absolute;
    right: 2px;
    bottom: 3px;
}
.block-a1 .history-rectangle-3 .cell {
    width: 34px;
    height: 34px;
    background-color: #eee;
    border-radius: 8px 0 0 8px;
    border-right: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}
.block-a1 .history-rectangle-3 .rectangle-editable-area {
    font-size: 14px;
    text-align: left;
    display: flex;
    align-items: center;
    padding-left: 5px;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: clip;
    caret-color: #007BFF;
    outline: none;
    box-sizing: border-box;
    height: 100%;
    background-color: transparent;
    left: 34px;
    right: 6px;
    font-weight: normal;
}
.block-a1 .history-rectangle-3 .rectangle-editable-area:hover {
    overflow-x: auto;
}
.block-a1 .history-rectangle-3 .rectangle-editable-area:not(:focus) {
    overflow-x: hidden;
}
.block-a1 .history-rectangle-3 .rectangle-editable-area::-webkit-scrollbar {
    height: 2px;
}
.block-a1 .history-rectangle-3 .rectangle-editable-area::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 1px;
}
.block-a1 .history-rectangle-3 .rectangle-editable-area::-webkit-scrollbar-track {
    background: transparent;
}

.block-a1 .rectangle-label {
    position: absolute;
    font-size: 13px;
    font-weight: bold;
    color: black;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 34px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.block-a1 .label-pow-block-hash { left: 5px; top: 4px; }
.block-a1 .label-prev-pow-block-hash { left: 5px; top: 53px; }
.block-a1 .label-pow-block { left: 5px; bottom: 5px; }

.block-a1 .block-c {
    width: 450px;
    height: 130px;
    background-color: white;
    border: 2px solid #D3D3D3;
    border-radius: 10px;
    position: absolute;
    top: 5px;
    left: 7px;
    display: none;
    overflow: auto;
    text-align: left;
    padding: 10px;
    box-sizing: border-box;
    z-index: 2;
    font-size: 12px;
    overflow-x: hidden;
}
.block-a1 .block-c div {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.block-a1:hover .block-c {
    display: block;
}
.block-a1 .block-c::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}
.block-a1 .block-c::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 4px;
}
.block-a1 .block-c::-webkit-scrollbar-track {
    background: transparent;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 6px;
    margin-bottom: 6px;
}
.block-a1 .block-c:hover {
    overflow-x: auto;
}

/* Styles for Block C1 (replica of Block C, inside Block A1, hover logic) */
.block-c1 {
    width: 450px;
    height: 130px;
    background-color: white;
    border: 2px solid #D3D3D3;
    border-radius: 10px;
    position: absolute;
    top: 5px;
    left: 7px;
    display: none;
    overflow: auto;
    text-align: left;
    padding: 10px;
    box-sizing: border-box;
    z-index: 2;
    font-size: 12px;
    overflow-x: hidden;
}
.block-c1 div {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.block-a1:hover .block-c1 {
    display: block;
}
.block-c1::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}
.block-c1::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 4px;
}
.block-c1::-webkit-scrollbar-track {
    background: transparent;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 6px;
    margin-bottom: 6px;
}
.block-c1:hover {
    overflow-x: auto;
}

/* Styles for Block A2 (replica of Block A1, 5px to the right of Block A1) */
.block-a2 {
    width: 463px;
    height: 140px;
    background-color: #DFF0D8;
    border: 2px solid #D3D3D3;
    border-radius: 10px;
    position: absolute;
    /* Place 5px to the right of Block A1: 13px (block-a left) + 463px (block-a width) + 5px (gap) + 463px (block-a1 width) + 5px (gap) = 968px */
    top: 820px;
    left: 972px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    z-index: 10;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Replicate all rectangle and label styles for .block-a2 */
.block-a2 .history-rectangle-1,
.block-a2 .history-rectangle-2 {
    width: 354px;
    height: 34px;
    background-color: #eee;
    border: 2px solid #D3D3D3;
    border-radius: 10px;
    position: absolute;
    right: 2px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: clip;
    line-height: 34px;
    height: calc(34px + 6px);
    font-weight: normal;
}
.block-a2 .history-rectangle-1 { top: 3px; }
.block-a2 .history-rectangle-2 { top: 51px; }

.block-a2 .history-rectangle-1:hover,
.block-a2 .history-rectangle-2:hover {
    overflow-x: auto;
}
.block-a2 .history-rectangle-1::-webkit-scrollbar,
.block-a2 .history-rectangle-2::-webkit-scrollbar {
    height: 2px;
    border-radius: 1px;
}
.block-a2 .history-rectangle-1::-webkit-scrollbar-thumb,
.block-a2 .history-rectangle-2::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 1px;
}
.block-a2 .history-rectangle-1::-webkit-scrollbar-track,
.block-a2 .history-rectangle-2::-webkit-scrollbar-track {
    background: transparent;
    margin-left: 6px;
    margin-right: 6px;
}

.block-a2 .history-rectangle-3 {
    width: 351px;
    height: 34px;
    background-color: #eee;
    border: 2px solid #D3D3D3;
    border-radius: 10px;
    position: absolute;
    right: 2px;
    bottom: 3px;
}
.block-a2 .history-rectangle-3 .cell {
    width: 34px;
    height: 34px;
    background-color: #eee;
    border-radius: 8px 0 0 8px;
    border-right: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}
.block-a2 .history-rectangle-3 .rectangle-editable-area {
    font-size: 14px;
    text-align: left;
    display: flex;
    align-items: center;
    padding-left: 5px;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: clip;
    caret-color: #007BFF;
    outline: none;
    box-sizing: border-box;
    height: 100%;
    background-color: transparent;
    left: 34px;
    right: 6px;
    font-weight: normal;
}
.block-a2 .history-rectangle-3 .rectangle-editable-area:hover {
    overflow-x: auto;
}
.block-a2 .history-rectangle-3 .rectangle-editable-area:not(:focus) {
    overflow-x: hidden;
}
.block-a2 .history-rectangle-3 .rectangle-editable-area::-webkit-scrollbar {
    height: 2px;
}
.block-a2 .history-rectangle-3 .rectangle-editable-area::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 1px;
}
.block-a2 .history-rectangle-3 .rectangle-editable-area::-webkit-scrollbar-track {
    background: transparent;
}

.block-a2 .rectangle-label {
    position: absolute;
    font-size: 13px;
    font-weight: bold;
    color: black;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 34px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.block-a2 .label-pow-block-hash { left: 5px; top: 4px; }
.block-a2 .label-prev-pow-block-hash { left: 5px; top: 53px; }
.block-a2 .label-pow-block { left: 5px; bottom: 5px; }

/* Block C2 (hidden by default, shows on hover) */
.block-a2 .block-c2 {
    width: 450px;
    height: 130px;
    background-color: white;
    border: 2px solid #D3D3D3;
    border-radius: 10px;
    position: absolute;
    top: 5px;
    left: 7px;
    display: none;
    overflow: auto;
    text-align: left;
    padding: 10px;
    box-sizing: border-box;
    z-index: 2;
    font-size: 12px;
    overflow-x: hidden;
}
.block-a2 .block-c2 div {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.block-a2:hover .block-c2 {
    display: block;
}
.block-a2 .block-c2::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}
.block-a2 .block-c2::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 4px;
}
.block-a2 .block-c2::-webkit-scrollbar-track {
    background: transparent;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 6px;
    margin-bottom: 6px;
}
.block-a2 .block-c2:hover {
    overflow-x: auto;
}

/* Styles for Block B1 (replica of Block B, 5px to the right) */
.block-b1 {
    width: 463px;
    height: 140px;
    background-color: #DFF0D8;
    border: 2px solid #D3D3D3;
    border-radius: 10px;
    position: absolute;
    /* Place 5px to the right of Block B */
    top: 1050px;
    left: 492.5px !important; /* 13px (block-b left) + 463px (block-b width) + 5px gap */
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    z-index: 10;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Replicate all rectangle and label styles for .block-b1 */
.block-b1 .history-rectangle-1,
.block-b1 .history-rectangle-2 {
    width: 354px;
    height: 34px;
    background-color: #eee;
    border: 2px solid #D3D3D3;
    border-radius: 10px;
    position: absolute;
    right: 2px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: clip;
    line-height: 34px;
    height: calc(34px + 6px);
    font-weight: normal;
}
.block-b1 .history-rectangle-1 { top: 3px; }
.block-b1 .history-rectangle-2 { top: 51px; }

.block-b1 .history-rectangle-1:hover,
.block-b1 .history-rectangle-2:hover {
    overflow-x: auto;
}
.block-b1 .history-rectangle-1::-webkit-scrollbar,
.block-b1 .history-rectangle-2::-webkit-scrollbar {
    height: 2px;
    border-radius: 1px;
}
.block-b1 .history-rectangle-1::-webkit-scrollbar-thumb,
.block-b1 .history-rectangle-2::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 1px;
}
.block-b1 .history-rectangle-1::-webkit-scrollbar-track,
.block-b1 .history-rectangle-2::-webkit-scrollbar-track {
    background: transparent;
    margin-left: 6px;
    margin-right: 6px;
}

.block-b1 .history-rectangle-3 {
    width: 351px;
    height: 34px;
    background-color: #eee;
    border: 2px solid #D3D3D3;
    border-radius: 10px;
    position: absolute;
    right: 2px;
    bottom: 3px;
}
.block-b1 .history-rectangle-3 .cell {
    width: 34px;
    height: 34px;
    background-color: #eee;
    border-radius: 8px 0 0 8px;
    border-right: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}
.block-b1 .history-rectangle-3 .rectangle-editable-area {
    font-size: 14px;
    text-align: left;
    display: flex;
    align-items: center;
    padding-left: 5px;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: clip;
    caret-color: #007BFF;
    outline: none;
    box-sizing: border-box;
    height: 100%;
    background-color: transparent;
    left: 34px;
    right: 6px;
    font-weight: normal;
}
.block-b1 .history-rectangle-3 .rectangle-editable-area:hover {
    overflow-x: auto;
}
.block-b1 .history-rectangle-3 .rectangle-editable-area:not(:focus) {
    overflow-x: hidden;
}
.block-b1 .history-rectangle-3 .rectangle-editable-area::-webkit-scrollbar {
    height: 2px;
}
.block-b1 .history-rectangle-3 .rectangle-editable-area::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 1px;
}
.block-b1 .history-rectangle-3 .rectangle-editable-area::-webkit-scrollbar-track {
    background: transparent;
}

.block-b1 .rectangle-label {
    position: absolute;
    font-size: 13px;
    font-weight: bold;
    color: black;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 34px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.block-b1 .label-pow-block-hash { left: 5px; top: 4px; }
.block-b1 .label-prev-pow-block-hash { left: 5px; top: 53px; }
.block-b1 .label-pow-block { left: 5px; bottom: 5px; }

/* Block D1 (hidden by default, shows on hover) */
.block-d1 {
    width: 450px;
    height: 130px;
    background-color: white;
    border: 2px solid #D3D3D3;
    border-radius: 10px;
    position: absolute;
    top: 5px;
    left: 7px;
    display: none;
    overflow: auto;
    text-align: left;
    padding: 10px;
    box-sizing: border-box;
    z-index: 2;
    font-size: 12px;
    overflow-x: hidden;
}

.block-d1 div {
    margin-top: 2px;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: visible; /* <-- fix: allow parent to scroll horizontally */
    text-overflow: ellipsis; /* Add ellipsis if text overflows */
}

.block-b1:hover .block-d1 {
    display: block;
}
.block-d1::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}
.block-d1::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 4px;
}
.block-d1::-webkit-scrollbar-track {
    background: transparent;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 6px;
    margin-bottom: 6px;
}
.block-d1:hover {
    overflow-x: auto;
}

/* Styles for Block B2 (replica of Block B1, 5px to the right) */
.block-b2 {
    width: 463px;
    height: 140px;
    background-color: #DFF0D8;
    border: 2px solid #D3D3D3;
    border-radius: 10px;
    position: absolute;
    /* Place 5px to the right of Block B1: 13px (block-b left) + 463px (block-b width) + 5px (gap) + 463px (block-b1 width) + 5px (gap) = 968px */
    top: 1050px;
    left: 972px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    z-index: 10;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Replicate all rectangle and label styles for .block-b2 */
.block-b2 .history-rectangle-1,
.block-b2 .history-rectangle-2 {
    width: 354px;
    height: 34px;
    background-color: #eee;
    border: 2px solid #D3D3D3;
    border-radius: 10px;
    position: absolute;
    right: 2px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: clip;
    line-height: 34px;
    height: calc(34px + 6px);
    font-weight: normal;
}
.block-b2 .history-rectangle-1 { top: 3px; }
.block-b2 .history-rectangle-2 { top: 51px; }

.block-b2 .history-rectangle-1:hover,
.block-b2 .history-rectangle-2:hover {
    overflow-x: auto;
}
.block-b2 .history-rectangle-1::-webkit-scrollbar,
.block-b2 .history-rectangle-2::-webkit-scrollbar {
    height: 2px;
    border-radius: 1px;
}
.block-b2 .history-rectangle-1::-webkit-scrollbar-thumb,
.block-b2 .history-rectangle-2::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 1px;
}
.block-b2 .history-rectangle-1::-webkit-scrollbar-track,
.block-b2 .history-rectangle-2::-webkit-scrollbar-track {
    background: transparent;
    margin-left: 6px;
    margin-right: 6px;
}

.block-b2 .history-rectangle-3 {
    width: 351px;
    height: 34px;
    background-color: #eee;
    border: 2px solid #D3D3D3;
    border-radius: 10px;
    position: absolute;
    right: 2px;
    bottom: 3px;
}
.block-b2 .history-rectangle-3 .cell {
    width: 34px;
    height: 34px;
    background-color: #eee;
    border-radius: 8px 0 0 8px;
    border-right: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}
.block-b2 .history-rectangle-3 .rectangle-editable-area {
    font-size: 14px;
    text-align: left;
    display: flex;
    align-items: center;
    padding-left: 5px;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: clip;
    caret-color: #007BFF;
    outline: none;
    box-sizing: border-box;
    height: 100%;
    background-color: transparent;
    left: 34px;
    right: 6px;
    font-weight: normal;
}
.block-b2 .history-rectangle-3 .rectangle-editable-area:hover {
    overflow-x: auto;
}
.block-b2 .history-rectangle-3 .rectangle-editable-area:not(:focus) {
    overflow-x: hidden;
}
.block-b2 .history-rectangle-3 .rectangle-editable-area::-webkit-scrollbar {
    height: 2px;
}
.block-b2 .history-rectangle-3 .rectangle-editable-area::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 1px;
}
.block-b2 .history-rectangle-3 .rectangle-editable-area::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

.block-b2 .rectangle-label {
    position: absolute;
    font-size: 13px;
    font-weight: bold;
    color: black;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 34px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.block-b2 .label-pow-block-hash { left: 5px; top: 4px; }
.block-b2 .label-prev-pow-block-hash { left: 5px; top: 53px; }
.block-b2 .label-pow-block { left: 5px; bottom: 5px; }

/* Block D2 (hidden by default, shows on hover) */
.block-d2 {
    width: 450px;
    height: 130px;
    background-color: white;
    border: 2px solid #D3D3D3;
    border-radius: 10px;
    position: absolute;
    top: 5px;
    left: 7px;
    display: none;
    overflow: auto;
    text-align: left;
    padding: 10px;
    box-sizing: border-box;
    z-index: 2;
    font-size: 12px;
    overflow-x: hidden;
}

.block-d2 div {
    margin-top: 2px;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: visible; /* <-- fix: allow parent to scroll horizontally */
    text-overflow: ellipsis; /* Add ellipsis if text overflows */
}

.block-b2:hover .block-d2 {
    display: block;
}
.block-d2::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}
.block-d2::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 4px;
}
.block-d2::-webkit-scrollbar-track {
    background: transparent;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 6px;
    margin-bottom: 6px;
}
.block-d2:hover {
    overflow-x: auto;
}