/* Spin button for Nonce rectangle (additional-rectangle-3) */
.additional-rectangle-3 .spin-button {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
}

.additional-rectangle-3 .spin-button div {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: #333;
}

.additional-rectangle-3 .spin-button div:hover {
    background-color: #e0e0e0;
}

.additional-rectangle-3 .spin-button .up {
    border-bottom: 1px solid #ccc;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.additional-rectangle-3 .spin-button .down {
    border-top: 1px solid #ccc;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.transparent-blocks-container {
    display: flex;
    justify-content: center;
    align-items: center; /* Center-align vertically */
    gap: 12.6px; /* Further reduced gap by 10% (14px - 10%) */
    margin-top: 13px; /* Position blocks 40px below the header */
    height: auto; /* Adjust height to fit content */
}

.transparent-block {
    width: 459px; /* Reduced width by 10% (510px - 10%) */
    height: 630px;
    background-color: #FFEE99; /* Updated background color to yellow */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 15px; /* Rounded edges */
    position: relative; /* Ensure child elements are positioned relative to this block */
}

.block-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the left */
}

.block-heading {
    font-size: 19px; /* Reduced font size */
    font-family: Arial, sans-serif; /* Changed font to Arial */
    margin-bottom: 10px; /* Distance between heading and block */
    text-align: left; /* Align text to the left */
    width: 459px; /* Match the width of the block */
}

.rectangle {
    width: 351px; /* Width of the rectangle */
    height: 34px; /* Height of the rectangle */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    background-color: white; /* Background color set to white */
    margin: 20px auto 10px auto; /* Increased top margin to move lower */
    position: relative; /* Allow positioning within the block */
    left: 35px; /* Adjusted position to move slightly away from the right border */
}

.rectangle .spin-button {
    position: absolute;
    width: 20px; /* Width of the spin button */
    height: 20px; /* Match the height of the rectangle */
    right: 10px; /* 5px from the right border of the rectangle */
    top: 50%; /* Position relative to the center */
    transform: translateY(-50%); /* Adjust to vertically center the button */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Light grey background */
    border: 1px solid #ccc; /* Border for the spin button */
    border-radius: 5px; /* Rounded edges */
    cursor: pointer;
}

.rectangle .spin-button div {
    width: 100%;
    height: 50%; /* Half the height for up and down sections */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px; /* Font size for the arrows */
    color: #333; /* Dark grey color for the arrows */
}

.rectangle .spin-button div:hover {
    background-color: #e0e0e0; /* Slightly darker grey on hover */
}

.rectangle .spin-button .up {
    border-bottom: 1px solid #ccc; /* Divider between up and down sections */
}

.rectangle .spin-button .down {
    border-top: 1px solid #ccc; /* Divider between up and down sections */
}

.rectangle.no-cell {
    width: 351px; /* Same width as the first rectangle */
    height: 34px; /* Same height as the first rectangle */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    background-color: white; /* White background */
    margin: 15px auto 0 auto; /* Positioned 15px below the first rectangle */
    position: relative; /* Allow positioning within the block */
    left: 35px; /* Same alignment as the first rectangle */
}

.rectangle.no-cell:nth-of-type(1) {
    background-color: #eee; /* Grey background */
}

.rectangle.no-cell:nth-of-type(3),
.rectangle.no-cell:nth-of-type(4) {
    background-color: #eee; /* Grey background */
}

.cell {
    width: 34px; /* Width of the cell */
    height: 34px; /* Height of the cell matches the rectangle */
    background-color: #eee; /* Updated background color */
    border-radius: 8px 0 0 8px; /* Rounded edges on the left side */
    border-right: 1px solid #ccc; /* Right border updated */
    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 */
}

.stacked-rectangles {
    display: flex;
    flex-direction: column; /* Stack rectangles vertically */
    gap: 0; /* No spacing between rectangles */
    margin: 15px auto 0 auto; /* Positioned 15px below the fourth rectangle */
    width: 351px; /* Same width as other rectangles */
    position: relative; /* Ensure alignment with other rectangles */
    left: 35px; /* Align with other rectangles */
}

.stacked-rectangle {
    width: 351px; /* Same width as other rectangles */
    height: 34px; /* Same height as other rectangles */
    border: 2px solid #D3D3D3; /* Default border */
    background-color: white; /* White background */
    border-radius: 10px; /* Rounded edges for all rectangles */
    position: relative; /* Allow positioning of the cell inside */
}

.stacked-rectangle:nth-child(1) {
    width: 351px; /* Same width as other rectangles */
    height: 34px; /* Same height as other rectangles */
    border: 2px solid #D3D3D3; /* Default border */
    background-color: white; /* White background */
    border-radius: 10px; /* Fully rounded edges for the 5th rectangle */
    position: relative; /* Allow positioning of the cell inside */
}

.stacked-rectangle:nth-child(2) {
    width: 351px; /* Same width as other rectangles */
    height: 34px; /* Same height as other rectangles */
    border: 2px solid #D3D3D3; /* Default border */
    background-color: white; /* White background */
    border-radius: 10px; /* Fully rounded edges for the 6th rectangle */
    position: relative; /* Allow positioning of the cell inside */
}

.stacked-rectangle:nth-child(3) {
    width: 351px; /* Same width as other rectangles */
    height: 34px; /* Same height as other rectangles */
    border: 2px solid #D3D3D3; /* Default border */
    background-color: white; /* White background */
    border-radius: 10px; /* Fully rounded edges for the 7th rectangle */
    position: relative; /* Allow positioning of the cell inside */
}

.stacked-rectangle:first-child {
    border-radius: 10px 10px 0 0; /* Rounded edges on the top-most rectangle */
}

.stacked-rectangle:last-child {
    border-radius: 0 0 10px 10px; /* Rounded edges on the bottom-most rectangle */
}

.stacked-rectangle:nth-child(1) {
    border-radius: 10px 10px 0 0; /* Top edges of the 5th rectangle */
}

.stacked-rectangle:nth-child(3) {
    border-radius: 0 0 10px 10px; /* Bottom edges of the 7th rectangle */
}

.stacked-rectangles > .stacked-rectangle:nth-child(1) {
    border-radius: 10px; /* Fully rounded edges for the 5th rectangle */
}

.stacked-rectangles > .stacked-rectangle:nth-child(2) {
    border-radius: 10px; /* Fully rounded edges for the 6th rectangle */
}

.stacked-rectangles > .stacked-rectangle:nth-child(3) {
    border-radius: 10px; /* Fully rounded edges for the 7th rectangle */
}

.stacked-cell {
    width: 34px; /* Width of the cell */
    height: 100%; /* Ensure the height covers the entire rectangle */
    background-color: #eee; /* Grey background (same as the # cell) */
    border-radius: 8px 0 0 8px; /* Rounded edges on the left */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    font-size: 12px; /* Font size for the text */
    font-weight: bold; /* Bold text */
    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 */
    color: black; /* Text color */
    box-sizing: border-box; /* Include padding and border in width/height */
    padding: 0; /* Ensure no padding interferes */
    margin: 0; /* Ensure no margin interferes */
    overflow: hidden; /* Prevent content from overflowing */
    clip-path: inset(0 0 0 0); /* Ensure the cell stays within the rectangle */
    border-right: 1px solid #D3D3D3; /* Set the right border to 1px wide */
}

.stacked-extra-cell {
    width: 60px; /* Width of the new vertical cell */
    height: 100%; /* Ensure the height covers the entire rectangle */
    background-color: white; /* White background */
    border-left: 1px solid #D3D3D3; /* Left border */
    border-right: 1px solid #D3D3D3; /* Right border */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    font-size: 12px; /* Font size for the text */
    font-weight: bold; /* Bold text */
    position: absolute; /* Position relative to the rectangle */
    left: 34px; /* Position 81px from the PKR cell */
    top: 0; /* Align to the top of the rectangle */
    color: black; /* Text color */
    box-sizing: border-box; /* Include padding and border in width/height */
    padding: 0; /* Ensure no padding interferes */
    margin: 0; /* Ensure no margin interferes */
    overflow: hidden; /* Prevent content from overflowing */
}

.stacked-trx-fee-cell {
    width: 40px; /* Width of the new vertical cell */
    height: 100%; /* Ensure the height covers the entire rectangle */
    background-color: #eee; /* Grey background */
    border-left: 1px solid #D3D3D3; /* Left border */
    border-right: 1px solid #D3D3D3; /* Right border */
    display: flex;
    flex-direction: column; /* Arrange text vertically */
    align-items: center; /* Center content horizontally */
    justify-content: center; /* Center content vertically */
    font-size: 12px; /* Font size for the text */
    font-weight: bold; /* Bold text */
    position: absolute; /* Position relative to the rectangle */
    left: 94px; /* Position 40px from the previous cell */
    top: 0; /* Align to the top of the rectangle */
    color: black; /* Text color */
    box-sizing: border-box; /* Include padding and border in width/height */
    padding: 0; /* Ensure no padding interferes */
    margin: 0; /* Ensure no margin interferes */
    overflow: hidden; /* Prevent content from overflowing */
    line-height: 1; /* Adjust line height for proper spacing */
}

.stacked-trx-fee-cell span {
    display: block; /* Ensure each part is on a separate line */
}

.stacked-new-cell {
    width: 30px; /* Width of the new vertical cell */
    height: 100%; /* Ensure the height covers the entire rectangle */
    background-color: white; /* White background */
    border-left: 1px solid #D3D3D3; /* Left border is 1px wide */
    border-right: 1px solid #D3D3D3; /* Ensure right border is 1px wide */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    font-size: 12px; /* Font size for the text */
    font-weight: bold; /* Bold text */
    position: absolute; /* Position relative to the rectangle */
    left: 134px; /* Position next to the TRX Fee cell */
    top: 0; /* Align to the top of the rectangle */
    color: black; /* Text color */
    box-sizing: border-box; /* Include padding and border in width/height */
    padding: 0; /* Ensure no padding interferes */
    margin: 0; /* Ensure no margin interferes */
    overflow: hidden; /* Prevent content from overflowing */
}

.stacked-from-cell {
    width: 40px; /* Width of the new vertical cell */
    height: 100%; /* Ensure the height covers the entire rectangle */
    background-color: #eee; /* Grey background */
    border-left: 1px solid #D3D3D3; /* Ensure left border is 1px wide */
    border-right: 1px solid #D3D3D3; /* Right border is 1px wide */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    font-size: 12px; /* Font size for the text */
    font-weight: bold; /* Bold text */
    position: absolute; /* Position relative to the rectangle */
    left: 164px; /* Adjust position to align with the right border of the blank cell */
    top: 0; /* Align to the top of the rectangle */
    color: black; /* Text color */
    box-sizing: border-box; /* Include padding and border in width/height */
    padding: 0; /* Ensure no padding interferes */
    margin: 0; /* Ensure no margin interferes */
    overflow: hidden; /* Prevent content from overflowing */
}

.stacked-next-cell {
    width: 60px; /* Width of the new vertical cell */
    height: 100%; /* Ensure the height covers the entire rectangle */
    background-color: white; /* White background */
    border-left: 1px solid #D3D3D3; /* Left border is 1px wide */
    border-right: 1px solid #D3D3D3; /* Right border is 1px wide */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    font-size: 12px; /* Font size for the text */
    font-weight: bold; /* Bold text */
    position: absolute; /* Position relative to the rectangle */
    left: 204px; /* Position next to the From cell */
    top: 0; /* Align to the top of the rectangle */
    color: black; /* Text color */
    box-sizing: border-box; /* Include padding and border in width/height */
    padding: 0; /* Ensure no padding interferes */
    margin: 0; /* Ensure no margin interferes */
    overflow: hidden; /* Prevent content from overflowing */
}

.stacked-arrow-cell {
    width: 20px; /* Width of the new vertical cell */
    height: 100%; /* Ensure the height covers the entire rectangle */
    background-color: #eee; /* Grey background */
    border-left: 1px solid #D3D3D3; /* Left border is 1px wide */
    border-right: 1px solid #D3D3D3; /* Right border is 1px wide */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    font-size: 14px; /* Font size for the text */
    font-weight: bold; /* Bold text */
    position: absolute; /* Position relative to the rectangle */
    left: 264px; /* Position 15px apart from the previous cell */
    top: 0; /* Align to the top of the rectangle */
    color: black; /* Text color */
    box-sizing: border-box; /* Include padding and border in width/height */
    padding: 0; /* Ensure no padding interferes */
    margin: 0; /* Ensure no margin interferes */
    overflow: hidden; /* Prevent content from overflowing */
}

.stacked-empty-cell {
    width: auto; /* Flexible width for the remaining space */
    height: 100%; /* Ensure the height covers the entire rectangle */
    background-color: white; /* White background */
    border-left: 1px solid #D3D3D3; /* Left border attached to the right border of the → cell */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    font-size: 12px; /* Font size for any potential text */
    font-weight: bold; /* Bold text */
    position: absolute; /* Position relative to the rectangle */
    left: 284px; /* Position next to the → cell */
    top: 0; /* Align to the top of the rectangle */
    color: black; /* Text color */
    box-sizing: border-box; /* Include padding and border in width/height */
    padding: 0; /* Ensure no padding interferes */
    margin: 0; /* Ensure no margin interferes */
    overflow: hidden; /* Prevent content from overflowing */
}

.additional-rectangle-1 {
    width: 351px; /* Same width as other rectangles */
    height: 34px; /* Same height as other rectangles */
    border: 2px solid #D3D3D3; /* Default border */
    background-color: white; /* White background */
    border-radius: 10px; /* Rounded edges */
    position: relative; /* Allow positioning */
    margin-top: 10px; /* Adjust gap to 10px */
    left: 35px; /* Align with other rectangles */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.additional-rectangle-2 {
    width: 351px; /* Same width as other rectangles */
    height: 34px; /* Same height as other rectangles */
    border: 2px solid #D3D3D3; /* Default border */
    background-color: white; /* White background */
    border-radius: 10px; /* Rounded edges */
    position: relative; /* Allow positioning */
    margin-top: 10px; /* Adjust gap to 10px */
    left: 35px; /* Align with other rectangles */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.additional-rectangle-3 {
    width: 351px; /* Same width as other rectangles */
    height: 34px; /* Same height as other rectangles */
    border: 2px solid #D3D3D3; /* Default border */
    background-color: white; /* White background */
    border-radius: 10px; /* Rounded edges */
    position: relative; /* Allow positioning */
    margin-top: 10px; /* Adjust gap to 10px */
    left: 35px; /* Align with other rectangles */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
}

.additional-rectangle-4 {
    width: 351px; /* Same width as other rectangles */
    height: 34px; /* Same height as other rectangles */
    border: 2px solid #D3D3D3; /* Default border */
    background-color: white; /* White background */
    border-radius: 10px; /* Rounded edges */
    position: relative; /* Allow positioning */
    margin-top: 10px; /* Adjust gap to 10px */
    left: 35px; /* Align with other rectangles */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
}

.additional-rectangle-5 {
    width: 351px; /* Same width as other rectangles */
    height: 34px; /* Same height as other rectangles */
    border: 2px solid #D3D3D3; /* Default border */
    background-color: #eee; /* Grey background */
    border-radius: 10px; /* Rounded edges */
    position: relative; /* Allow positioning */
    margin-top: 10px; /* Adjust gap to 10px */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    left: 35px; /* Align with other rectangles */
}

.rectangle-label {
    position: absolute;
    font-size: 13px; /* Font size for the text */
    color: black; /* Text color */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Align text to the left */
    height: 34px; /* Match the height of the rectangle */
    left: -80px; /* Position close to the left border of the transparent block */
    width: 80px; /* Adjust width for proper alignment */
    text-align: left; /* Align text to the left */
    font-weight: bold; /* Make the text bold */
}

.mine-button {
    width: 80px; /* Button width */
    height: 34px; /* Button height */
    background-color: #007BFF; /* Blue color (same as mempool page) */
    color: white; /* Text color */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded edges */
    font-size: 12px; /* Set font size to 12px */
    font-weight: bold; /* Ensure text is not bold */
    cursor: pointer; /* Pointer cursor on hover */
    position: relative; /* Ensure relative positioning */
    margin-top: 5px; /* 10px below the 12th rectangle */
    left: 52px; /* Reset any additional left offset */
    display: flex;
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
    transition: 0.3s; /* Smooth transition for hover effect */
    margin-left: 35px; /* Align with the left border of the rectangles */
    text-align: center; /* Center-align text */
    line-height: normal; /* Allow multi-line text alignment */
    white-space: pre-wrap; /* Allow text to wrap to the next line */
}

.mine-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.new-cell {
    position: absolute; /* Keep absolute positioning */
    width: 100px; /* Width of the cell */
    height: 34px; /* Height of the cell */
    background-color: #eee; /* Set grey background */
    border: 1px solid #D3D3D3; /* Grey border */
    border-radius: 5px; /* Curved edges */
    left: 185px; /* Horizontal position */
    top: 592px; /* Vertical position */
    display: flex; /* Flexbox for layout */
    align-items: center; /* Center content vertically */
    box-sizing: border-box; /* Include padding and border in width/height */
    z-index: 0; /* Ensure it stays behind the header */
    font-size: 14px; /* Set font size */
    font-weight: normal; /* Remove bold font */
    padding-left: 4px; /* Align text 4px from the left */
}

.new-cell .spin-button {
    position: absolute;
    width: 20px; /* Width of the spin button */
    height: 25px; /* Height of the spin button */
    right: 0; /* Align with the right border of the cell */
    top: 50%; /* Position relative to the center */
    transform: translateY(-50%); /* Adjust to vertically center the button */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Light grey background */
    border: 1px solid #ccc; /* Border for the spin button */
    border-radius: 5px; /* Rounded edges */
    cursor: pointer;
}

.new-cell .spin-button div {
    width: 100%;
    height: 50%; /* Half the height for up and down sections */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px; /* Font size for the arrows */
    color: #333; /* Dark grey color for the arrows */
}

.new-cell .spin-button div:hover {
    background-color: #e0e0e0; /* Slightly darker grey on hover */
}

.new-cell .spin-button .up {
    border-bottom: 1px solid #ccc; /* Divider between up and down sections */
}

.new-cell .spin-button .down {
    border-top: 1px solid #ccc; /* Divider between up and down sections */
}

.new-cell-label {
    position: absolute;
    left: calc(185px + 100px + 10px); /* Position 10px to the right of the new cell */
    top: calc(592px + (34px / 2) - (14px / 2)); /* Center vertically with the new cell */
    font-size: 14px; /* Font size for the label */
    color: black; /* Text color */
    font-family: Arial, sans-serif; /* Font family */
    font-weight: bold; /* Bold text */
    white-space: nowrap; /* Prevent text wrapping */
    line-height: 1; /* Ensure proper vertical alignment */
}

.block-2-rectangle {
    width: 351px; /* Same width as other rectangles */
    height: 34px; /* Same height as other rectangles */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    background-color: #eee; /* Grey background */
    position: relative; /* Allow positioning */
    margin: 15px; /* Margin top as specified */
    left: 45px; /* Ensure alignment with block 1 */
    margin-left: 45px; /* Ensure alignment with block 1 */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Center content horizontally */
    overflow-x: hidden; /* Allow horizontal scrolling */
    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 */
    box-sizing: border-box;
    padding-left: 4px;
    padding-right: 4px; /* Padding for the rectangle */
    margin-right: 4px;
    font-size: 14px;
}

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

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

.block-2-rectangle::-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 1 in Block 2 */
.block-2-rectangle::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

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

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

.block-2-rectangle-2 {
    width: 351px; /* Same width as other rectangles */
    height: 34px; /* Same height as other rectangles */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    background-color: white; /* White background */
    position: relative; /* Allow positioning */
    margin-top: 10px; /* 10px below the first rectangle */
    margin-left: 45px; /* Align with the first rectangle in block 2 */
    left: 45px; /* Align with the first rectangle in block 2 */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Align content to the left */
    box-sizing: border-box; /* Include padding and border in width/height */
    height: calc(34px + 6px);
}

.block-2-rectangle-2 .cell {
    width: 34px; /* Width of the cell */
    height: 36px; /* 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 */
}

.block-2-rectangle-2 .spin-button {
    position: absolute;
    width: 20px; /* Width of the spin button */
    height: 20px; /* Match the height of the rectangle */
    right: 10px; /* 10px from the right border of the rectangle */
    top: 50%; /* Position relative to the center */
    transform: translateY(-50%); /* Adjust to vertically center the button */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Light grey background */
    border: 1px solid #ccc; /* Border for the spin button */
    border-radius: 5px; /* Rounded edges */
    cursor: pointer;
}

.block-2-rectangle-2 .spin-button div {
    width: 100%;
    height: 50%; /* Half the height for up and down sections */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px; /* Font size for the arrows */
    color: #333; /* Dark grey color for the arrows */
}

.block-2-rectangle-2 .spin-button div:hover {
    background-color: #e0e0e0; /* Slightly darker grey on hover */
}

.block-2-rectangle-2 .spin-button .up {
    border-bottom: 1px solid #ccc; /* Divider between up and down sections */
}

.block-2-rectangle-2 .spin-button .down {
    border-top: 1px solid #ccc; /* Divider between up and down sections */
}

.block-2-rectangle-2 .rectangle-editable-area {
    font-size: 14px; /* Set font size to 14px */
    padding-left: 5px; /* Set padding-left to 5px */
    text-align: left; /* Align text to the left */
    white-space: nowrap; /* Prevent text wrapping */
    overflow-x: hidden; /* Hide scrollbar by default */
    overflow-y: hidden; /* Hide vertical overflow */
    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 */
    display: flex; /* Use flexbox for vertical alignment */
    align-items: center; /* Vertically align the blinking cursor */
    justify-content: flex-start; /* Align text to the left */
    line-height: 34px; /* Match the height of the rectangle for proper alignment */
    height: 100%; /* Full height of the rectangle */
    background-color: transparent; /* Transparent background */
}

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

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

.block-2-rectangle-2 .rectangle-editable-area::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

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

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

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

.block-2-cells {
    display: flex;
    justify-content: space-between; /* Ensure cells are spaced apart */
    align-items: center;
    width: 100%; /* Full width of the container */
    margin-top: 10px; /* 10px margin from rectangle 2 */
    margin-bottom: 10px; /* 10px margin from rectangle 4 */
    position: relative;
    left: 45px; /* Align with the left border of rectangle 2 */
}

.block-2-cell-1 {
    width: 100px; /* Width of the cell */
    height: 34px; /* Height of the cell */
    background-color: #eee; /* Grey background */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Curved borders */
    box-sizing: border-box; /* Include padding and border in width/height */
    margin-left: 45px; /* Margin from the left border of the transparent block */
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Align content to the left */
    display: flex; /* Use flexbox for alignment */
    font-size: 14px; /* Font size for the text */
    overflow-x: hidden;
    overflow-y: hidden;
    padding-left: 25.5px;
    padding-right: 4px;
}
.block-2-cell-1:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover */
}

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

.block-2-cell-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-2-cell-1::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

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

.block-2-cell-1::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

.block-2-cell-2 {
    width: 100px; /* Width of the cell */
    height: 34px; /* Height of the cell */
    background-color: #eee; /* Grey background */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Curved borders */
    box-sizing: border-box; /* Include padding and border in width/height */
    margin-right: 62px; /* Margin from the right border of the transparent block */
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Align content to the left */
    display: flex; /* Use flexbox for alignment */
    font-size: 14px; /* Font size for the text */
    overflow-x: hidden;
    overflow-y: hidden;
    padding-left: 25.5px;
    padding-right: 4px;
}

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

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

.block-2-cell-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-2-cell-2::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

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

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

.block-2-label-miner-node-id {
    font-size: 13px; /* Font size for the label */
    font-weight: bold; /* Make the text bold */
    color: black; /* Text color */
    display: flex;
    align-items: center; /* Center-align vertically */
    justify-content: center; /* Center-align horizontally */
    width: auto; /* Adjust width dynamically */
    height: 34px; /* Match the height of the cells */
    margin-right: -40px; /* Reduced spacing to bring it closer to cell 2 */
    text-align: center; /* Ensure text is centered */
}

.block-2-rectangle-4 {
    width: 351px; /* Same width as other rectangles */
    height: 34px; /* Adjust height to match the actual box model height */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    background-color: #eee; /* Grey background */
    position: relative; /* Allow positioning */
    margin-top: 10px; /* 10px below the third rectangle */
    margin-left: 45px; /* Align with the previous rectangles in block 2 */
    left: 45px; /* Align with the previous rectangles in block 2 */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center the text */
    justify-content: flex-start; /* Align text to the left */
    text-align: left; /* Ensure text aligns to the left */
    padding-left: 6px; /* Add padding to prevent text from touching the left border */
    box-sizing: border-box; /* Include padding in width calculation */
    overflow-x: auto; /* Allow horizontal scrolling */
    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);
}

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

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

.block-2-rectangle-4::-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-2-rectangle-5 {
    width: 351px; /* Same width as other rectangles */
    height: 34px; /* Same height as other rectangles */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    background-color: #eee; /* Grey background */
    position: relative; /* Allow positioning */
    margin-top: 10px; /* 10px below the fourth rectangle */
    margin-left: 45px; /* Align with the previous rectangles in block 2 */
    left: 45px; /* Align with the previous rectangles in block 2 */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Center content horizontally */
    overflow-x: hidden; /* Allow horizontal scrolling */
    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 */
    box-sizing: border-box;
    padding-left: 4px;
    padding-right: 4px; /* Padding for the rectangle */
    margin-right: 4px;
    font-size: 14px;
    height: calc(34px + 6px); /* Adjust height to include padding */
}

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

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

.block-2-rectangle-5::-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-2-rectangle-5::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

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

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

.block-2-new-cell {
    width: 100px; /* Width of the cell */
    height: 34px; /* Height of the cell */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    background-color: #eee; /* Grey background */
    position: relative; /* Allow positioning */
    margin-top: 10px; /* 10px below the 5th rectangle */
    margin-left: auto; /* Push the cell to the right */
    right: 14px; /* Align the right border with the right border of the 5th rectangle */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Center content horizontally */
    overflow-x: hidden; /* Allow horizontal scrolling */
    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 */
    box-sizing: border-box;
    padding-left: 44.5px;
    padding-right: 4px; /* Padding for the rectangle */
    margin-right: 4px;
    font-size: 14px;
}

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

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

.block-2-new-cell::-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 new cell (speed attempts) in Block 2 */
.block-2-new-cell::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

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

.block-2-new-cell::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}


.block-2-centered-rectangle-6 {
    width: calc(100% - 28px); /* Full width minus 14px padding on both sides */
    height: 250px; /* Height of the rectangle */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    background-color: white; /* White background */
    position: relative; /* Allow positioning */
    margin-top: 30px; /* 30px below the previous cell */
    margin-left: 14px; /* 14px from the left border of the transparent block */
    margin-right: 14px; /* 14px from the right border of the transparent block */
    display: block; /* Ensure block-level layout */
    text-align: left; /* Align text to the left */
    padding: 2px; /* Add padding for spacing */
    line-height: 1.5; /* Adjust line height for proper spacing */
    overflow-x: hidden; /* Hide horizontal scrolling by default */
    overflow-y: hidden; /* Hide vertical scrolling by default */
    box-sizing: border-box;
    padding-left: 6px;
    padding-right: 6px; /* Padding for the rectangle */
    margin-right: 4px;
    font-size: 14px;
}

.block-2-centered-rectangle-6:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover */
    overflow-y: auto; /* Show vertical scrollbar on hover */
}

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

.block-2-centered-rectangle-6::-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 */
}

/* Scrollbar styling for Rectangle 6 in Block 2 */
.block-2-centered-rectangle-6::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
    width: 2px; /* Thin scrollbar */
}

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

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


.block-2-rectangle-7 {
    width: 351px; /* Same width as other rectangles */
    height: 34px; /* Same height as other rectangles */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    background-color: white; /* White background */
    position: relative; /* Allow positioning */
    margin-top: 10px; /* 10px below rectangle 6 */
    margin-left: 45px; /* Align with rectangles 1, 2, 3, and 4 */
    left: 45px; /* Align with rectangles 1, 2, 3, and 4 */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    cursor: text; /* Show text cursor when hovering over the rectangle */
}

.label-powit-block-hash {
    position: absolute;
    font-size: 13px;
    color: black;
    left: 5px; /* Position next to rectangle 1 */
    top: 15px; /* Align with rectangle 1 */
    height: 34px; /* Match rectangle height */
    display: flex;
    align-items: center; /* Center-align vertically */
    justify-content: center; /* Center-align horizontally */
    text-align: center; /* Ensure text is centered */
    line-height: 1.2; /* Adjust line height for proper spacing */
    white-space: pre-wrap; /* Allow text to wrap to the next line */
    font-weight: bold;
}

.label-block {
    position: absolute;
    font-size: 13px;
    color: black;
    left: 5px; /* Position next to rectangle 2 */
    top: 67px; /* Align with rectangle 2 */
    height: 34px; /* Match rectangle height */
    display: flex;
    align-items: center;
    justify-content: center; /* Center-align horizontally */
    text-align: center; /* Ensure text is centered */
    font-weight: bold;
}

.label-wc-id-witnessing {
    position: absolute;
    font-size: 13px;
    color: black;
    left: 5px; /* Position next to rectangle 3 */
    top: 118px; /* Align with rectangle 3 */
    height: 34px; /* Match rectangle height */
    display: flex;
    align-items: center;
    font-weight: bold;
    text-align: center;
}

.label-other-data {
    position: absolute;
    font-size: 13px;
    color: black;
    left: 5px; /* Position next to rectangle 4 */
    top: 160px; /* Align with rectangle 4 */
    height: 34px; /* Match rectangle height */
    display: flex;
    align-items: center;
    font-weight: bold;
    text-align: center;
}

.label-valid-pow-hash {
    position: absolute;
    font-size: 13px;
    color: black;
    left: 5px; /* Position next to rectangle 5 */
    top: 205px; /* Align with rectangle 5 */
    height: 34px; /* Match rectangle height */
    display: flex;
    align-items: center;
    font-weight: bold;
    text-align: center;
}

.label-attempts-computed {
    position: absolute;
    font-size: 13px;
    color: black;
    left: 5px; /* Position next to the new cell */
    top: 260px; /* Align with the new cell */
    height: 34px; /* Match rectangle height */
    display: flex;
    align-items: center;
    font-weight: bold;
    text-align: center;
}

.label-prev-powit-block-hash {
    position: absolute;
    font-size: 13px;
    color: black;
    left: 5px; /* Position next to rectangle 7 */
    top: 590px; /* Align with rectangle 7 */
    height: 34px; /* Match rectangle height */
    display: flex;
    align-items: center;
    font-weight: bold;
    text-align: center;
    justify-content: center;
}

.heading-history {
    position: relative; /* Change to relative to keep it within the block */
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: black;
    margin-bottom: -25px; /* Ensure 1px margin between heading and rectangle 6 */
    margin-top: 10px; /* Add some spacing above the heading */
    line-height: normal; /* Ensure proper vertical alignment */
}

.block-3-rectangle {
    /* Same styles as block-2-rectangle */
    width: 351px; /* Same width as other rectangles */
    height: 34px; /* Same height as other rectangles */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    background-color: #eee; /* Grey background */
    position: relative; /* Allow positioning */
    margin: 15px; /* Margin top as specified */
    left: 45px; /* Ensure alignment with block 1 */
    margin-left: 45px; /* Ensure alignment with block 1 */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Center content horizontally */
    overflow-x: hidden; /* Allow horizontal scrolling */
    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 */
    box-sizing: border-box;
    padding-left: 4px;
    padding-right: 4px; /* Padding for the rectangle */
    margin-right: 4px;
    font-size: 14px;
}

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

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

.block-3-rectangle::-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-3-rectangle::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

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

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

.block-3-rectangle-2 {
    /* Same styles as block-2-rectangle-2 */
    width: 351px; /* Same width as other rectangles */
    height: 34px; /* Same height as other rectangles */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    background-color: #eee; /* Grey background */
    position: relative; /* Allow positioning */
    margin-top: 10px; /* 10px below the first rectangle */
    margin-left: 45px; /* Align with the first rectangle in block 2 */
    left: 45px; /* Align with the first rectangle in block 2 */
    display: flex; /* Use flexbox for proper alignment */
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Align content to the left */
    overflow: hidden; /* Prevent text overflow */
    box-sizing: border-box; /* Ensure padding is respected */
    height: calc(34px + 6px);
}

.block-3-rectangle-2 .cell {
    width: 34px; /* Width of the cell */
    height: 36px; /* Height of the cell matches the rectangle */
    background-color: #eee; /* Grey background */
    border-radius: 10px 0 0 10px; /* 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 */
    flex-shrink: 0; /* Prevent the # cell from shrinking */
}

.block-3-rectangle-2 .spin-button {
    position: absolute;
    width: 20px; /* Width of the spin button */
    height: 20px; /* Match the height of the rectangle */
    right: 10px; /* 10px from the right border of the rectangle */
    top: 50%; /* Position relative to the center */
    transform: translateY(-50%); /* Adjust to vertically center the button */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Light grey background */
    border: 1px solid #ccc; /* Border for the spin button */
    border-radius: 5px; /* Rounded edges */
    cursor: pointer;
    flex-shrink: 0; /* Prevent the spinner button from shrinking */
}

.block-3-rectangle-2 .spin-button div {
    width: 100%;
    height: 50%; /* Half the height for up and down sections */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px; /* Font size for the arrows */
    color: #333; /* Dark grey color for the arrows */
}

.block-3-rectangle-2 .spin-button div:hover {
    background-color: #e0e0e0; /* Slightly darker grey on hover */
}

.block-3-rectangle-2 .spin-button .up {
    border-bottom: 1px solid #ccc; /* Divider between up and down sections */
}

.block-3-rectangle-2 .spin-button .down {
    border-top: 1px solid #ccc; /* Divider between up and down sections */
}

.block-3-rectangle-2 .text-content {
    flex-grow: 1; /* Allow the text content to take up remaining space */
    max-width: calc(100% - 36px); /* Reserve space for the # cell and spinner button */
    overflow: hidden; /* Prevent text overflow */
    white-space: nowrap; /* Prevent text wrapping */
    text-overflow: clip; /* Clip overflowing text */
    text-align: left; /* Align text to the left */
    box-sizing: border-box; /* Include padding in width calculation */
    font-size: 14px;
    padding-left: 4px;
    justify-content: flex-start; /* Align text to the left */
    box-sizing: border-box; /* Include padding in width calculation */
    overflow-x: hidden; /* Allow horizontal scrolling */
    overflow-y: hidden; /* Hide vertical overflow */
    text-overflow: clip; /* Prevent ellipsis or clipping */
    line-height: 38px; /* Match the height of the rectangle for proper alignment */
    margin-left: 35px; /* Align with the right border of the # cell */
    margin-right: 40px; /* Align with the left border of the spinner button */
}

.block-3-rectangle-2 .text-content:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover */
}

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

.block-3-rectangle-2 .text-content::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
    margin-left: 0px; /* Align with the left border of the rectangle */
    margin-right: 0px; /* Align with the right border of the rectangle */
}

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

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

.block-3-rectangle-2 .text-content::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

.block-3-cells {
    /* Same styles as block-2-cells */
    display: flex;
    justify-content: space-between; /* Ensure cells are spaced apart */
    align-items: center;
    width: 100%; /* Full width of the container */
    margin-top: 10px; /* 10px margin from rectangle 2 */
    margin-bottom: 10px; /* 10px margin from rectangle 4 */
    position: relative;
    left: 45px; /* Align with the left border of rectangle 2 */
}

.block-3-cell-1 {
    /* Same styles as block-2-cell-1 */
    width: 100px; /* Width of the cell */
    height: 34px; /* Height of the cell */
    background-color: #eee; /* Grey background */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Curved borders */
    box-sizing: border-box; /* Include padding and border in width/height */
    margin-left: 45px; /* Margin from the left border of the transparent block */
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Align content to the left */
    display: flex; /* Use flexbox for alignment */
    font-size: 14px; /* Font size for the text */
    overflow-x: hidden;
    overflow-y: hidden;
    padding-left: 25.5px;
    padding-right: 4px;
}

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

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

.block-3-cell-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-3-cell-1::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

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

.block-3-cell-1::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

.block-3-cell-2 {
    /* Same styles as block-2-cell-2 */
    width: 100px; /* Width of the cell */
    height: 34px; /* Height of the cell */
    background-color: #eee; /* Grey background */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Curved borders */
    box-sizing: border-box; /* Include padding and border in width/height */
    margin-right: 62px; /* Margin from the right border of the transparent block */
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Align content to the left */
    display: flex; /* Use flexbox for alignment */
    font-size: 14px; /* Font size for the text */
    overflow-x: hidden;
    overflow-y: hidden;
    padding-left: 25.5px;
    padding-right: 4px;
}
.block-3-cell-2:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover */
}

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

.block-3-cell-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-3-cell-2::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

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

.block-3-cell-2::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

.block-3-label-miner-node-id {
    /* Same styles as block-2-label-miner-node-id */
    font-size: 13px; /* Font size for the label */
    font-weight: bold; /* Make the text bold */
    color: black; /* Text color */
    display: flex;
    align-items: center; /* Center-align vertically */
    justify-content: center; /* Center-align horizontally */
    width: auto; /* Adjust width dynamically */
    height: 34px; /* Match the height of the cells */
    margin-right: -40px; /* Reduced spacing to bring it closer to cell 2 */
    text-align: center; /* Ensure text is centered */
}

.block-3-rectangle-4 {
    /* Same styles as block-2-rectangle-4 */
    width: 351px; /* Same width as other rectangles */
    height: 34px; /* Same height as other rectangles */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    background-color: #eee; /* Grey background */
    position: relative; /* Allow positioning */
    margin-top: 10px; /* 10px below the third rectangle */
    margin-left: 45px; /* Align with the previous rectangles in block 2 */
    left: 45px; /* Align with the previous rectangles in block 2 */
    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: 6px; /* Add padding to prevent text from touching the left border */
    box-sizing: border-box; /* Include padding in width calculation */
    overflow-x: auto; /* Allow horizontal scrolling */
    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);
}

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

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

.block-3-rectangle-4::-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-3-rectangle-4::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

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

.block-3-rectangle-4::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

.block-3-rectangle-5 {
    /* Same styles as block-2-rectangle-5 */
    width: 351px; /* Same width as other rectangles */
    height: 34px; /* Same height as other rectangles */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    background-color: #eee; /* Grey background */
    position: relative; /* Allow positioning */
    margin-top: 10px; /* 10px below the fourth rectangle */
    margin-left: 45px; /* Align with the previous rectangles in block 2 */
    left: 45px; /* Align with the previous rectangles in block 2 */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Center content horizontally */
    overflow-x: hidden; /* Allow horizontal scrolling */
    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 */
    box-sizing: border-box;
    padding-left: 4px;
    padding-right: 4px; /* Padding for the rectangle */
    margin-right: 4px;
    font-size: 14px;
    height: calc(34px + 6px); /* Adjust height to include padding */
}

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

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

.block-3-rectangle-5::-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-3-rectangle-5::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

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

.block-3-rectangle-5::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

.block-3-new-cell {
    /* Same styles as block-2-new-cell */
    width: 100px; /* Width of the cell */
    height: 34px; /* Height of the cell */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    background-color: #eee; /* Grey background */
    position: relative; /* Allow positioning */
    margin-top: 10px; /* 10px below the 5th rectangle */
    margin-left: auto; /* Push the cell to the right */
    right: 14px; /* Align the right border with the right border of the 5th rectangle */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Center content horizontally */
    overflow-x: hidden; /* Allow horizontal scrolling */
    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 */
    box-sizing: border-box;
    padding-left: 44.5px;
    padding-right: 4px; /* Padding for the rectangle */
    margin-right: 4px;
    font-size: 14px;
}

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

.block-3-new-cell::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
    border-radius: 1px; /* Rounded edges */
}

.block-3-new-cell::-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-3-new-cell::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

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

.block-3-new-cell::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

.block-3-centered-rectangle-6 {
    /* Same styles as block-2-centered-rectangle-6 */
    width: calc(100% - 28px); /* Full width minus 14px padding on both sides */
    height: 250px; /* Height of the rectangle */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    background-color: #eee; /* Grey background */
    position: relative; /* Allow positioning */
    margin-top: 30px; /* 30px below the previous cell */
    margin-left: 14px; /* 14px from the left border of the transparent block */
    margin-right: 14px; /* 14px from the right border of the transparent block */
    display: block; /* Ensure block-level layout */
    text-align: left; /* Align text to the left */
    padding: 2px; /* Add padding for spacing */
    line-height: 1.5; /* Adjust line height for proper spacing */
    overflow-x: hidden; /* Hide horizontal scrolling by default */
    overflow-y: hidden; /* Hide vertical scrolling by default */
    box-sizing: border-box;
    padding-left: 6px;
    padding-right: 6px; /* Padding for the rectangle */
    margin-right: 4px;
    font-size: 14px;
}

.block-3-centered-rectangle-6:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover */
    overflow-y: auto; /* Show vertical scrollbar on hover */
}

.block-3-centered-rectangle-6::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
    width: 2px; /* Thin scrollbar */
    border-radius: 1px; /* Rounded edges */
}

.block-3-centered-rectangle-6::-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 */
}

/* Scrollbar styling for Rectangle 6 in Block 2 */
.block-3-centered-rectangle-6::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
    width: 2px; /* Thin scrollbar */
}

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

.block-3-centered-rectangle-6::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}


.block-3-rectangle-7 {
    /* Same styles as block-2-rectangle-7 */
    width: 351px; /* Same width as other rectangles */
    height: 34px; /* Same height as other rectangles */
    border: 2px solid #D3D3D3; /* Grey border */
    border-radius: 10px; /* Rounded edges */
    background-color: #eee; /* Grey background */
    position: relative; /* Allow positioning */
    margin-top: 10px; /* 10px below rectangle 6 */
    margin-left: 45px; /* Align with rectangles 1, 2, 3, and 4 */
    left: 45px; /* Align with rectangles 1, 2, 3, and 4 */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: flex-start; /* Center content horizontally */
    overflow-x: hidden; /* Allow horizontal scrolling */
    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 */
    box-sizing: border-box;
    padding-left: 4px;
    padding-right: 4px; /* Padding for the rectangle */
    margin-right: 4px;
    font-size: 14px;
    height: calc(34px + 6px); /* Adjust height to include padding */
}

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

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

.block-3-rectangle-7::-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-3-rectangle-7::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

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

.block-3-rectangle-7::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

.label-powit-block-hash-3 {
    /* Same styles as label-powit-block-hash */
    position: absolute;
    font-size: 13px;
    color: black;
    left: 5px; /* Position next to rectangle 1 */
    top: 15px; /* Align with rectangle 1 */
    height: 34px; /* Match rectangle height */
    display: flex;
    align-items: center; /* Center-align vertically */
    justify-content: center; /* Center-align horizontally */
    text-align: center; /* Ensure text is centered */
    line-height: 1.2; /* Adjust line height for proper spacing */
    white-space: pre-wrap; /* Allow text to wrap to the next line */
    font-weight: bold;
}

.label-block-3 {
    /* Same styles as label-block */
    position: absolute;
    font-size: 13px;
    color: black;
    left: 5px; /* Position next to rectangle 2 */
    top: 67px; /* Align with rectangle 2 */
    height: 34px; /* Match rectangle height */
    display: flex;
    align-items: center;
    justify-content: center; /* Center-align horizontally */
    text-align: center; /* Ensure text is centered */
    font-weight: bold;
}

.label-wc-id-witnessing-3 {
    /* Same styles as label-wc-id-witnessing */
    position: absolute;
    font-size: 13px;
    color: black;
    left: 5px; /* Position next to rectangle 3 */
    top: 118px; /* Align with rectangle 3 */
    height: 34px; /* Match rectangle height */
    display: flex;
    align-items: center;
    font-weight: bold;
    text-align: center;
}

.label-other-data-3 {
    /* Same styles as label-other-data */
    position: absolute;
    font-size: 13px;
    color: black;
    left: 5px; /* Position next to rectangle 4 */
    top: 160px; /* Align with rectangle 4 */
    height: 34px; /* Match rectangle height */
    display: flex;
    align-items: center;
    font-weight: bold;
    text-align: center;
}

.label-valid-pow-hash-3 {
    /* Same styles as label-valid-pow-hash */
    position: absolute;
    font-size: 13px;
    color: black;
    left: 5px; /* Position next to rectangle 5 */
    top: 205px; /* Align with rectangle 5 */
    height: 34px; /* Match rectangle height */
    display: flex;
    align-items: center;
    font-weight: bold;
    text-align: center;
}

.label-attempts-computed-3 {
    /* Same styles as label-attempts-computed */
    position: absolute;
    font-size: 13px;
    color: black;
    left: 5px; /* Position next to the new cell */
    top: 260px; /* Align with the new cell */
    height: 34px; /* Match rectangle height */
    display: flex;
    align-items: center;
    font-weight: bold;
    text-align: center;
}

.label-prev-powit-block-hash-3 {
    /* Same styles as label-prev-powit-block-hash */
    position: absolute;
    font-size: 13px;
    color: black;
    left: 5px; /* Position next to rectangle 7 */
    top: 590px; /* Align with rectangle 7 */
    height: 34px; /* Match rectangle height */
    display: flex;
    align-items: center;
    font-weight: bold;
    text-align: center;
    justify-content: center;
}

.heading-history-3 {
    /* Same styles as heading-history */
    position: relative; /* Change to relative to keep it within the block */
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: black;
    margin-bottom: -25px; /* Ensure 1px margin between heading and rectangle 6 */
    margin-top: 10px; /* Add some spacing above the heading */
    line-height: normal; /* Ensure proper vertical alignment */
}

/* Styles for editable cells in block 1, rectangles 5, 6, and 7 */

/* Editable cell on the right-hand side of the PKR cell */
.stacked-extra-cell[contenteditable="true"] {
    width: 60px;
    height: 34px;
    max-width: 60px;
    max-height: 34px;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: clip;
    outline: none;
    cursor: text;
    caret-color: #007BFF;
    box-sizing: border-box;
    padding: 5px;
    position: absolute;
    border: 1px solid transparent;
}

.stacked-extra-cell[contenteditable="true"]:focus {
    border: 2px solid #007BFF;
    box-sizing: border-box;
    outline: none;
    z-index: 2;
}

/* Editable cell on the right-hand side of the TRX Fee cell */
.stacked-new-cell[contenteditable="true"] {
    width: 30px;
    height: 34px;
    max-width: 30px;
    max-height: 34px;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: clip;
    outline: none;
    cursor: text;
    caret-color: #007BFF;
    box-sizing: border-box;
    padding: 5px;
    position: absolute;
    border: 1px solid transparent;
}

.stacked-new-cell[contenteditable="true"]:focus {
    border: 2px solid #007BFF;
    box-sizing: border-box;
    outline: none;
    z-index: 2;
}

/* Editable cell on the right-hand side of the From cell */
.stacked-next-cell[contenteditable="true"] {
    width: 60px;
    height: 34px;
    max-width: 60px;
    max-height: 34px;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: clip;
    outline: none;
    cursor: text;
    caret-color: #007BFF;
    box-sizing: border-box;
    padding: 5px;
    position: absolute;
    border: 1px solid transparent;
}

.stacked-next-cell[contenteditable="true"]:focus {
    border: 2px solid #007BFF;
    box-sizing: border-box;
    outline: none;
    z-index: 2;
}

/* Editable cell on the right-hand side of the → cell */
.stacked-empty-cell[contenteditable="true"] {
    width: auto;
    height: 100%;
    max-width: 69px;
    max-height: 34px;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: clip;
    outline: none;
    cursor: text;
    caret-color: #007BFF;
    box-sizing: border-box;
    padding: 5px;
    position: absolute;
    left: 284px;
    right: -1.5px;
    background-color: white;
    border-left: 1px solid #D3D3D3;
    border-right: 2px solid #D3D3D3;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.stacked-empty-cell[contenteditable="true"]:focus {
    border: 2px solid #007BFF;
    box-sizing: border-box;
    outline: none;
    z-index: 2;
}

/* Editable cells (stacked-extra-cell, stacked-new-cell, stacked-next-cell, stacked-empty-cell) */
.stacked-extra-cell[contenteditable="true"],
.stacked-new-cell[contenteditable="true"],
.stacked-next-cell[contenteditable="true"],
.stacked-empty-cell[contenteditable="true"] {
    text-align: left; /* Align text to the left */
    padding-left: 2px; /* Add 2px padding from the left */
    white-space: nowrap; /* Prevent text wrapping */
    overflow-x: hidden; /* Hide scrollbar by default */
    overflow-y: hidden; /* Hide vertical overflow */
    text-overflow: clip; /* Prevent ellipsis or clipping */
    caret-color: #007BFF; /* Set caret color */
    outline: none; /* Remove default outline */
    box-sizing: border-box; /* Include padding and border in dimensions */
    display: block; /* Ensure the element behaves like a block for proper alignment */
    line-height: 34px; /* Match the height of the cell for vertical centering */
    vertical-align: middle; /* Ensure the cursor aligns vertically in the middle */
    scrollbar-width: thin; /* For Firefox: Make the scrollbar thinner */
    font-weight: normal; /* Remove bold font */
    font-size: 14px;
}

/* Show horizontal scrollbar on hover */
.stacked-extra-cell[contenteditable="true"]:hover,
.stacked-new-cell[contenteditable="true"]:hover,
.stacked-next-cell[contenteditable="true"]:hover,
.stacked-empty-cell[contenteditable="true"]:hover {
    overflow-x: auto; /* Enable horizontal scrolling on hover */
}

/* Scrollbar styling */
.stacked-extra-cell[contenteditable="true"]::-webkit-scrollbar,
.stacked-new-cell[contenteditable="true"]::-webkit-scrollbar,
.stacked-next-cell[contenteditable="true"]::-webkit-scrollbar,
.stacked-empty-cell[contenteditable="true"]::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

.stacked-extra-cell[contenteditable="true"]::-webkit-scrollbar-thumb,
.stacked-new-cell[contenteditable="true"]::-webkit-scrollbar-thumb,
.stacked-next-cell[contenteditable="true"]::-webkit-scrollbar-thumb,
.stacked-empty-cell[contenteditable="true"]::-webkit-scrollbar-thumb {
    background-color: #aaa; /* Light grey scrollbar thumb */
    border-radius: 1px; /* Rounded edges */
}

.stacked-extra-cell[contenteditable="true"]::-webkit-scrollbar-track,
.stacked-new-cell[contenteditable="true"]::-webkit-scrollbar-track,
.stacked-next-cell[contenteditable="true"]::-webkit-scrollbar-track,
.stacked-empty-cell[contenteditable="true"]::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

/* Focused state for editable cells */
.stacked-extra-cell[contenteditable="true"]:focus,
.stacked-new-cell[contenteditable="true"]:focus,
.stacked-next-cell[contenteditable="true"]:focus,
.stacked-empty-cell[contenteditable="true"]:focus {
    border: 2px solid #007BFF; /* Highlight border on focus */
    box-sizing: border-box; /* Ensure consistent box model */
    outline: none; /* Remove default outline */
    z-index: 2; /* Bring focused cell to the front */
    overflow-x: auto; /* Show scrollbar when focused */
}

/* Editable cells (stacked-extra-cell, stacked-new-cell, stacked-next-cell, stacked-empty-cell) */
.stacked-extra-cell[contenteditable="true"],
.stacked-new-cell[contenteditable="true"],
.stacked-next-cell[contenteditable="true"],
.stacked-empty-cell[contenteditable="true"] {
    /* ...existing styles... */
    line-height: normal; /* Reset line height */
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Vertically center the content */
    justify-content: flex-start; /* Align text to the left */
}

/* Editable area between # cell and WebKit spin button */
.rectangle-editable-area {
    position: absolute;
    left: 36px; /* Start 2px away from the right border of the # cell */
    right: 34px; /* End 4px away from the left border of the WebKit spin button */
    height: 100%; /* Full height of the rectangle */
    background-color: transparent; /* Transparent background */
    outline: none; /* Remove default outline */
    cursor: text; /* Show text cursor */
    white-space: nowrap; /* Prevent text wrapping */
    overflow-x: auto; /* Allow horizontal scrolling */
    overflow-y: hidden; /* Hide vertical overflow */
    text-overflow: clip; /* Prevent ellipsis or clipping */
    caret-color: #007BFF; /* Blue caret color */
    padding-left: 2px; /* Start text 2px from the right border of the # cell */
    padding-right: 2px; /* Prevent text from going behind the spin button */
    box-sizing: border-box; /* Include padding in dimensions */
    display: flex; /* Use flexbox for vertical alignment */
    align-items: center; /* Vertically align the blinking cursor */
    z-index: 1; /* Ensure it stays above the rectangle */
    font-size: 12px; /* Font size for the editable area */
}

/* Scrollbar styling for the editable area */
.rectangle-editable-area::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

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

/* Default styles for the rectangle and # cell */
.rectangle {
    /* ...existing code... */
    border: 2px solid #D3D3D3; /* Default grey border */
    border-radius: 10px; /* Rounded edges */
    position: relative;
}

.rectangle .cell {
    /* ...existing code... */
    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 #D3D3D3; /* Default grey right border */
    position: absolute;
    left: 0; /* Align to the left-most border of the rectangle */
    top: 0; /* Align to the top of the rectangle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}

/* Change borders when the editable cell is focused */
.rectangle-editable-area:focus {
    outline: none; /* Remove default outline */
}

.rectangle-editable-area:focus ~ .cell {
    border-right: 2px solid #007BFF; /* Turn the right border of the # cell blue */
    border-left: 2px solid #007BFF; /* Turn the left curved border of the # cell blue */
}

.rectangle-editable-area:focus ~ .rectangle {
    border: 2px solid #007BFF; /* Turn all borders (top, bottom, left, right) blue */
    border-radius: 10px; /* Ensure the curved edges remain intact */
}

/* Revert borders when the editable cell loses focus */
.rectangle-editable-area:not(:focus) ~ .cell {
    border-right: 1px solid #D3D3D3; /* Revert the right border of the # cell to grey */
    border-left: 1px solid #D3D3D3; /* Revert the left curved border of the # cell to grey */
}

.rectangle-editable-area:not(:focus) ~ .rectangle {
    border: 2px solid #D3D3D3; /* Revert all borders to grey */
    border-radius: 10px; /* Ensure the curved edges remain intact */
}

.rectangle-editable-area:not(:focus) ~ .rectangle .cell {
    border-left: 1px solid #D3D3D3; /* Revert the left curved border to grey */
}

/* Change borders when the editable cell in Rectangle 2, Block 1 is focused */
.rectangle:nth-of-type(2) .rectangle-editable-area:focus ~ .cell {
    border-right: 2px solid #007BFF; /* Turn the right border of the # cell blue */
    border-left: 2px solid #007BFF; /* Turn the left curved border of the # cell blue */
}

.rectangle:nth-of-type(2) .rectangle-editable-area:focus ~ .rectangle {
    border: 2px solid #007BFF; /* Turn all borders (top, bottom, left, right) blue */
    border-radius: 10px; /* Ensure the curved edges remain intact */
}

/* Revert borders when the editable cell loses focus */
.rectangle:nth-of-type(2) .rectangle-editable-area:not(:focus) ~ .cell {
    border-right: 1px solid #D3D3D3; /* Revert the right border of the # cell to grey */
    border-left: 1px solid #D3D3D3; /* Revert the left curved border of the # cell to grey */
}

.rectangle:nth-of-type(2) .rectangle-editable-area:not(:focus) ~ .rectangle {
    border: 2px solid #D3D3D3; /* Revert all borders to grey */
    border-radius: 10px; /* Ensure the curved edges remain intact */
}

/* Style for the editable area in Rectangle 2, Block 1 */
.rectangle:nth-of-type(2) .rectangle-editable-area {
    text-align: left; /* Align text to the left */
    padding-left: 5px; /* Add padding for better readability */
    white-space: nowrap; /* Prevent text wrapping */
    overflow-x: hidden; /* Hide scrollbar by default */
    overflow-y: hidden; /* Hide vertical overflow */
    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 */
    font-size: 14px; /* Font size for the editable area */
    font-weight: normal; /* Remove bold text */
    color: black; /* Text color */
    background-color: transparent; /* Transparent background */
    display: flex; /* Use flexbox for vertical alignment */
    align-items: center; /* Vertically align the blinking cursor */
    justify-content: flex-start; /* Align text to the left */
    min-height: 100%; /* Ensure the height covers the rectangle */
    line-height: 34px; /* Match the height of the rectangle for proper alignment */
}

/* Focused state for the editable area */
.rectangle:nth-of-type(2) .rectangle-editable-area:focus {
    outline: none; /* No outline */
    box-shadow: none; /* Remove any shadow */
    display: flex; /* Ensure flexbox is applied when focused */
    align-items: center; /* Vertically align the blinking cursor */
    justify-content: flex-start; /* Align text to the left */
    line-height: 34px; /* Ensure consistent alignment */
}

.rectangle:nth-of-type(2) .rectangle-editable-area:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover if content overflows */
}

.rectangle:nth-of-type(2) .rectangle-editable-area::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

.rectangle:nth-of-type(2) .rectangle-editable-area::-webkit-scrollbar-thumb {
    background-color: #aaa; /* Light grey scrollbar thumb */
    border-radius: 1px; /* Rounded edges */
}

.rectangle:nth-of-type(2) .rectangle-editable-area::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

/* Style for the editable area in Rectangle 10, Block 1 */
.rectangle-10-editable {
    text-align: left; /* Align text to the left */
    padding-left: 2px; /* Start text 2px from the left border */
    padding-right: 2px; /* Prevent text from going behind the right border */
    white-space: nowrap; /* Prevent text wrapping */
    overflow-x: hidden; /* Hide scrollbar by default */
    overflow-y: hidden; /* Hide vertical overflow */
    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 */
    font-size: 14px; /* Font size for the editable area */
    font-weight: normal; /* Remove bold text */
    color: black; /* Text color */
    background-color: transparent; /* Transparent background */
    display: flex; /* Use flexbox for vertical alignment */
    align-items: center; /* Vertically align the blinking cursor */
    justify-content: flex-start; /* Align text to the left */
    min-height: 100%; /* Ensure the height covers the rectangle */
    line-height: 34px; /* Match the height of the rectangle for proper alignment */
    left: 4px;
}

.rectangle-10-editable:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover if content overflows */
}

.rectangle-10-editable::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

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

.rectangle-10-editable::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

/* Focused state for the editable area */
.rectangle-10-editable:focus {
    outline: none; /* No outline */
    box-shadow: none; /* Remove any shadow */
    display: flex; /* Ensure flexbox is applied when focused */
    align-items: center; /* Vertically align the blinking cursor */
    justify-content: flex-start; /* Align text to the left */
    line-height: 34px; /* Ensure consistent alignment */
}

/* Change borders when the editable cell in Rectangle 10, Block 1 is focused */
.additional-rectangle-3:focus-within {
    border: 2px solid #007BFF; /* Turn all borders (top, bottom, left, right) blue */
    border-radius: 10px; /* Ensure the curved edges remain intact */
}

/* Revert borders when the editable cell loses focus */
.additional-rectangle-3:not(:focus-within) {
    border: 2px solid #D3D3D3; /* Revert all borders to grey */
    border-radius: 10px; /* Ensure the curved edges remain intact */
}

/* Style for the editable area in Rectangle 11, Block 1 */
.rectangle-11-editable {
    text-align: left; /* Align text to the left */
    padding-left: 2px; /* Start text 2px from the left border */
    padding-right: 2px; /* Prevent text from going behind the right border */
    white-space: nowrap; /* Prevent text wrapping */
    overflow-x: hidden; /* Hide scrollbar by default */
    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 */
    font-size: 14px; /* Font size for the editable area */
    font-weight: normal; /* Remove bold text */
    color: black; /* Text color */
    background-color: transparent; /* Transparent background */
    display: flex; /* Use flexbox for vertical alignment */
    align-items: center; /* Vertically align the blinking cursor */
    justify-content: flex-start; /* Align text to the left */
    min-height: 100%; /* Ensure the height covers the rectangle */
    line-height: 34px; /* Match the height of the rectangle for proper alignment */
    left: 4px; /* Adjust left padding */
    right: 4px; /* Adjust right padding */
}

.rectangle-11-editable:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover if content overflows */
}

.rectangle-11-editable::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

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

.rectangle-11-editable::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

/* Focused state for the editable area */
.rectangle-11-editable:focus {
    outline: none; /* No outline */
    box-shadow: none; /* Remove any shadow */
    display: flex; /* Ensure flexbox is applied when focused */
    align-items: center; /* Vertically align the blinking cursor */
    justify-content: flex-start; /* Align text to the left */
    line-height: 34px; /* Ensure consistent alignment */
}

/* Change borders when the editable cell in Rectangle 11, Block 1 is focused */
.additional-rectangle-4:focus-within {
    border: 2px solid #007BFF; /* Turn all borders (top, bottom, left, right) blue */
    border-radius: 10px; /* Ensure the curved edges remain intact */
}

/* Revert borders when the editable cell loses focus */
.additional-rectangle-4:not(:focus-within) {
    border: 2px solid #D3D3D3; /* Revert all borders to grey */
    border-radius: 10px; /* Ensure the curved edges remain intact */
}

/* Style for the editable area in Rectangle 8, Block 1 */
.rectangle-8-editable {
    text-align: left; /* Align text to the left */
    padding-left: 2px; /* Start text 2px from the left border */
    padding-right: 2px; /* Prevent text from going behind the right border */
    white-space: nowrap; /* Prevent text wrapping */
    overflow-x: hidden; /* Hide scrollbar by default */
    overflow-y: hidden; /* Hide vertical overflow */
    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 */
    font-size: 14px; /* Font size for the editable area */
    font-weight: normal; /* Remove bold text */
    color: black; /* Text color */
    background-color: transparent; /* Transparent background */
    display: flex; /* Use flexbox for vertical alignment */
    align-items: center; /* Vertically align the blinking cursor */
    justify-content: flex-start; /* Align text to the left */
    min-height: 100%; /* Ensure the height covers the rectangle */
    line-height: 34px; /* Match the height of the rectangle for proper alignment */
    left: 4px; /* Adjust left padding */
    right: 4px; /* Adjust right padding */
}

.rectangle-8-editable:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover if content overflows */
}

.rectangle-8-editable::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

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

.rectangle-8-editable::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

/* Focused state for the editable area */
.rectangle-8-editable:focus {
    outline: none; /* No outline */
    box-shadow: none; /* Remove any shadow */
    display: flex; /* Ensure flexbox is applied when focused */
    align-items: center; /* Vertically align the blinking cursor */
    justify-content: flex-start; /* Align text to the left */
    line-height: 34px; /* Ensure consistent alignment */
}

/* Change borders when the editable cell in Rectangle 8, Block 1 is focused */
.additional-rectangle-1:focus-within {
    border: 2px solid #007BFF; /* Turn all borders (top, bottom, left, right) blue */
    border-radius: 10px; /* Ensure the curved edges remain intact */
}

/* Revert borders when the editable cell loses focus */
.additional-rectangle-1:not(:focus-within) {
    border: 2px solid #D3D3D3; /* Revert all borders to grey */
    border-radius: 10px; /* Ensure the curved edges remain intact */
}

/* Style for the editable area in Rectangle 9, Block 1 */
.rectangle-9-editable {
    text-align: left; /* Align text to the left */
    padding-left: 2px; /* Start text 2px from the left border */
    padding-right: 2px; /* Prevent text from going behind the right border */
    white-space: nowrap; /* Prevent text wrapping */
    overflow-x: hidden; /* Hide scrollbar by default */
    overflow-y: hidden; /* Hide vertical overflow */
    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 */
    font-size: 14px; /* Font size for the editable area */
    font-weight: normal; /* Remove bold text */
    color: black; /* Text color */
    background-color: transparent; /* Transparent background */
    display: flex; /* Use flexbox for vertical alignment */
    align-items: center; /* Vertically align the blinking cursor */
    justify-content: flex-start; /* Align text to the left */
    min-height: 100%; /* Ensure the height covers the rectangle */
    line-height: 34px; /* Match the height of the rectangle for proper alignment */
    left: 4px; /* Adjust left padding */
    right: 4px; /* Adjust right padding */
}

.rectangle-9-editable:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover if content overflows */
}

.rectangle-9-editable::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
}

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

.rectangle-9-editable::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

/* Focused state for the editable area */
.rectangle-9-editable:focus {
    outline: none; /* No outline */
    box-shadow: none; /* Remove any shadow */
    display: flex; /* Ensure flexbox is applied when focused */
    align-items: center; /* Vertically align the blinking cursor */
    justify-content: flex-start; /* Align text to the left */
    line-height: 34px; /* Ensure consistent alignment */
}

.additional-rectangle-2:focus-within {
    border: 2px solid #007BFF; /* Turn all borders (top, bottom, left, right) blue */
    border-radius: 10px; /* Ensure the curved edges remain intact */
}

.additional-rectangle-2:not(:focus-within) {
    border: 2px solid #D3D3D3; /* Revert all borders to grey */
    border-radius: 10px; /* Ensure the curved edges remain intact */
}

/* ...existing code... */
.rectangle-3-text {
    text-align: left; /* Align text to the left */
    padding-left: 4px; /* Start text 2px from the left border */
    padding-right: 4px; /* Prevent text from going behind the right border */
    white-space: nowrap; /* Prevent text wrapping */
    overflow-x: hidden; /* Hide vertical overflow */
    text-overflow: clip; /* Prevent ellipsis or clipping */
    caret-color: transparent; /* No caret since it's not editable */
    outline: none; /* Remove default outline */
    box-sizing: border-box; /* Include padding in dimensions */
    font-size: 14px; /* Font size for the text */
    font-weight: normal; /* Remove bold text */
    color: black; /* Text color */
    background-color: transparent; /* Transparent background */
    display: flex; /* Use flexbox for vertical alignment */
    align-items: center; /* Vertically align the text */
    justify-content: flex-start; /* Align text to the left */
    min-height: 100%; /* Ensure the height covers the rectangle */
    line-height: 34px; /* Match the height of the rectangle for proper alignment */
    left: 4px; /* Adjust left padding */
    right: 4px; /* Adjust right padding */
    margin-right: 4px;
    overflow-y: hidden;
    height: calc(34px - 10px);
}

.rectangle-3-text:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover */
}

/* Scrollbar styling for the text area */
.rectangle-3-text::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
    margin-left: 6px; /* Start 4px away from the left border */
    margin-right: 6px; /* End 4px away from the right border */
}

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

.rectangle-3-text::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
    margin-left: 6px; /* Start 4px away from the left border */
    margin-right: 6px; /* End 4px away from the right border */
}
/* ...existing code... */

/* Horizontal scroll bar logic for rectangle 1, rectangle 4, and rectangle 12 */
.rectangle-1-text,
.rectangle-4-text,
.rectangle-12-text {
    text-align: left; /* Align text to the left */
    padding-left: 4px; /* Start text 4px from the left border */
    padding-right: 4px; /* Prevent text from going behind the right border */
    white-space: nowrap; /* Prevent text wrapping */
    overflow-x: hidden; /* Hide scrollbar by default */
    text-overflow: clip; /* Prevent ellipsis or clipping */
    caret-color: transparent; /* No caret since it's not editable */
    outline: none; /* Remove default outline */
    box-sizing: border-box; /* Include padding in dimensions */
    font-size: 14px; /* Font size for the text */
    font-weight: normal; /* Remove bold text */
    color: black; /* Text color */
    background-color: transparent; /* Transparent background */
    display: flex; /* Use flexbox for vertical alignment */
    align-items: center; /* Vertically align the text */
    justify-content: flex-start; /* Align text to the left */
    min-height: 100%; /* Ensure the height covers the rectangle */
    line-height: 34px; /* Match the height of the rectangle for proper alignment */
    left: 4px; /* Adjust left padding */
    right: 4px; /* Adjust right padding */
    margin-right: 4px;
    overflow-y: hidden;
    height: calc(34px - 10px);
}

.rectangle-1-text:hover,
.rectangle-4-text:hover,
.rectangle-12-text:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover */
}

/* Scrollbar styling for rectangle 1, rectangle 4, and rectangle 12 */
.rectangle-1-text::-webkit-scrollbar,
.rectangle-4-text::-webkit-scrollbar,
.rectangle-12-text::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
    margin-left: 6px; /* Start 4px away from the left border */
    margin-right: 6px; /* End 4px away from the right border */
}

.rectangle-1-text::-webkit-scrollbar-thumb,
.rectangle-4-text::-webkit-scrollbar-thumb,
.rectangle-12-text::-webkit-scrollbar-thumb {
    background-color: #aaa; /* Light grey scrollbar thumb */
    border-radius: 1px; /* Rounded edges */
}

.rectangle-1-text::-webkit-scrollbar-track,
.rectangle-4-text::-webkit-scrollbar-track,
.rectangle-12-text::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
    margin-left: 6px; /* Start 4px away from the left border */
    margin-right: 6px; /* End 4px away from the right border */
}

/* Scrollbar styling for stacked-empty-cell (editable cell next to →) */
.stacked-empty-cell[contenteditable="true"]::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
    margin-right: 4px; /* Add 2px margin to the right */
}

.stacked-empty-cell[contenteditable="true"]::-webkit-scrollbar-thumb {
    background-color: #aaa; /* Light grey scrollbar thumb */
    border-radius: 1px; /* Rounded edges */
}

.stacked-empty-cell[contenteditable="true"]::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
    margin-right: 4px; /* Add 2px margin to the right */
}

/* Ensure hover effect works even when the editable cells are clicked */
.stacked-extra-cell[contenteditable="true"],
.stacked-new-cell[contenteditable="true"],
.stacked-next-cell[contenteditable="true"],
.stacked-empty-cell[contenteditable="true"] {
    /* ...existing styles... */
    overflow-x: hidden; /* Default state hides the scrollbar */
    transition: overflow-x 0.2s ease; /* Smooth transition for scrollbar visibility */
}

.stacked-extra-cell[contenteditable="true"]:hover,
.stacked-new-cell[contenteditable="true"]:hover,
.stacked-next-cell[contenteditable="true"]:hover,
.stacked-empty-cell[contenteditable="true"]:hover {
    overflow-x: auto; /* Show horizontal scrollbar on hover */
}

.stacked-extra-cell[contenteditable="true"]:focus:hover,
.stacked-new-cell[contenteditable="true"]:focus:hover,
.stacked-next-cell[contenteditable="true"]:focus:hover,
.stacked-empty-cell[contenteditable="true"]:focus:hover {
    overflow-x: auto; /* Ensure horizontal scrollbar shows on hover while focused */
}

.stacked-extra-cell[contenteditable="true"]:focus,
.stacked-new-cell[contenteditable="true"]:focus,
.stacked-next-cell[contenteditable="true"]:focus,
.stacked-empty-cell[contenteditable="true"]:focus {
    overflow-x: hidden; /* Hide scrollbar when focused but not hovered */
}

/* Ensure hover effect works even when the editable cells are clicked */
.stacked-extra-cell[contenteditable="true"]:focus:hover,
.stacked-new-cell[contenteditable="true"]:focus:hover,
.stacked-next-cell[contenteditable="true"]:focus:hover,
.stacked-empty-cell[contenteditable="true"]:focus:hover {
    overflow-x: auto; /* Enable horizontal scrolling on hover while focused */
}

/* Editable area for rectangle 7 in block 2 */
.block-2-rectangle-7-editable {
    text-align: left; /* Align text to the left */
    padding-left: 5px; /* Match padding with Rectangle 2 */
    padding-right: 5px; /* Match padding with Rectangle 2 */
    white-space: nowrap; /* Prevent text wrapping */
    overflow-x: hidden; /* Hide scrollbar by default */
    overflow-y: hidden; /* Hide vertical overflow */
    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 */
    font-size: 14px; /* Font size for the editable area */
    font-weight: normal; /* Remove bold text */
    color: black; /* Text color */
    background-color: transparent; /* Transparent background */
    display: flex; /* Use flexbox for vertical alignment */
    align-items: center; /* Vertically align the blinking cursor */
    justify-content: flex-start; /* Align text to the left */
    height: 100%; /* Ensure the height covers the rectangle */
    width: 100%; /* Ensure the width covers the rectangle */
    cursor: text; /* Show text cursor when hovering */
    margin-right: 5px;
}

.block-2-rectangle-7-editable:hover,
.block-2-rectangle-7-editable:focus {
    overflow-x: auto; /* Show horizontal scrollbar on hover or focus */
}

.block-2-rectangle-7-editable::-webkit-scrollbar {
    height: 2px; /* Thin scrollbar */
    margin-left: 6px; /* Start 4px away from the left border */
    margin-right: 6px; /* End 4px away from the right border */
}

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

.block-2-rectangle-7-editable::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
    margin-left: 6px; /* Start 4px away from the left border */
    margin-right: 6px; /* End 4px away from the right border */
}

/* Focused state for the editable area */
.block-2-rectangle-7-editable:focus {
    outline: none; /* No outline */
    box-shadow: none; /* Remove any shadow */
    display: flex; /* Ensure flexbox is applied when focused */
    align-items: center; /* Vertically align the blinking cursor */
    justify-content: flex-start; /* Align text to the left */
    line-height: 34px; /* Ensure consistent alignment */
}

/* Change borders when the editable cell in Rectangle 7, Block 2 is focused */
.block-2-rectangle-7:focus-within {
    border: 2px solid #007BFF; /* Turn all borders (top, bottom, left, right) blue */
    border-radius: 10px; /* Ensure the curved edges remain intact */
}

/* Revert borders when the editable cell loses focus */
.block-2-rectangle-7:not(:focus-within) {
    border: 2px solid #D3D3D3; /* Revert all borders to grey */
    border-radius: 10px; /* Ensure the curved edges remain intact */
}

/* Transparent blocks around Rectangle 7 */
.block-2-rectangle-7-transparent {
    position: absolute;
    background-color: transparent; /* Fully transparent */
    pointer-events: auto; /* Allow interaction */
    z-index: 0; /* Ensure they are behind Rectangle 6 */
}

.block-2-rectangle-7-transparent.top {
    width: 100%; /* Full width of Rectangle 7 */
    height: 5px; /* Height of the top block */
    top: -5px; /* Position above Rectangle 7 */
    left: 0;
}

.block-2-rectangle-7-transparent.bottom {
    width: 100%; /* Full width of Rectangle 7 */
    height: 5px; /* Height of the bottom block */
    bottom: -5px; /* Position below Rectangle 7 */
    left: 0;
}

.block-2-rectangle-7-transparent.left {
    width: 5px; /* Width of the left block */
    height: 100%; /* Full height of Rectangle 7 */
    top: 0;
    left: -5px; /* Position to the left of Rectangle 7 */
}

.block-2-rectangle-7-transparent.right {
    width: 5px; /* Width of the right block */
    height: 100%; /* Full height of Rectangle 7 */
    top: 0;
    right: -5px; /* Position to the right of Rectangle 7 */
}

/* Transparent block above Rectangle 2 */
.block-2-rectangle-2-transparent {
    position: absolute;
    background-color: transparent; /* Fully transparent */
    pointer-events: auto; /* Allow interaction */
    z-index: 0; /* Ensure it is behind other elements */
}

.block-2-rectangle-2-transparent.top {
    width: 100%; /* Full width of Rectangle 2 */
    height: 5px; /* Height of the top block */
    top: -5px; /* Position above Rectangle 2 */
    left: 0;
}

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

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

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

/* ...existing code... */

.rectangle-8-transparent,
.rectangle-9-transparent {
    position: absolute;
    background-color: transparent;
    pointer-events: none; /* Ensure they don't interfere with interactions */
}

.rectangle-8-transparent.top,
.rectangle-9-transparent.top {
    top: -5px;
    left: 0;
    right: 0;
    height: 5px;
}

.rectangle-8-transparent.bottom,
.rectangle-9-transparent.bottom {
    bottom: -5px;
    left: 0;
    right: 0;
    height: 5px;
}

.rectangle-8-transparent.left,
.rectangle-9-transparent.left {
    top: 0;
    bottom: 0;
    left: -5px;
    width: 5px;
}

.rectangle-8-transparent.right,
.rectangle-9-transparent.right {
    top: 0;
    bottom: 0;
    right: -5px;
    width: 5px;
}

/* ...existing code... */
.rectangle .spin-button .up:hover {
    background-color: #e0e0e0; /* Slightly darker grey on hover */
    border-radius: 5px 5px 0 0; /* Rounded edges on top-left and top-right */
}

.rectangle .spin-button .down:hover {
    background-color: #e0e0e0; /* Slightly darker grey on hover */
    border-radius: 0 0 5px 5px; /* Rounded edges on bottom-left and bottom-right */
}
/* ...existing code... */

/* ...existing code... */
.block-2-rectangle-2 .spin-button .up:hover,
.block-3-rectangle-2 .spin-button .up:hover,
.new-cell .spin-button .up:hover {
    background-color: #e0e0e0; /* Slightly darker grey on hover */
    border-radius: 5px 5px 0 0; /* Rounded edges on top-left and top-right */
}

.block-2-rectangle-2 .spin-button .down:hover,
.block-3-rectangle-2 .spin-button .down:hover,
.new-cell .spin-button .down:hover {
    background-color: #e0e0e0; /* Slightly darker grey on hover */
    border-radius: 0 0 5px 5px; /* Rounded edges on bottom-left and bottom-right */
}
/* ...existing code... */

/* ...existing code... */
.block-wrapper .revert-button {
    position: absolute;
    top: -36px; /* Align with the top of the block heading */
    left: 290px; /* 10px away from the left side of the block heading */
    width: 165px; /* Same width as the Start Mining button */
    height: 28px; /* Same height as the Start Mining button */
    background-color: #007BFF; /* Blue background */
    color: white; /* White text */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded edges */
    font-size: 12px; /* Font size for the text */
    font-weight: bold; /* Bold text */
    cursor: pointer; /* Pointer cursor on hover */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    text-align: center; /* Ensure text is centered */
    line-height: normal; /* Allow multi-line text alignment */
    white-space: nowrap; /* Prevent text wrapping */
    transition: 0.3s; /* Smooth transition for hover effect */
    z-index: 10; /* Ensure it stays above other elements */
}

.block-wrapper .revert-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}
/* ...existing code... */