/* to make the chinese blocks side by side */
table.cn_block.inline,
table.cn_block_with_trad.inline {
    display: inline-block; }

/* different background color, for grammar or pattern */
table.cn_block.pattern,
table.cn_block_with_trad.pattern {
    background-color: #e5d9d9; }

/* different background color, for premade phrase */
table.cn_block.phrase,
table.cn_block_with_trad.phrase {
    background-color: #dde5e9; }


/* regular chinese block, the table itself */
table.cn_block,
table.cn_block_with_trad {
    /* from note_noteless_square */
    font-family: "Shippori Antique", "segoe UI regular", serif;
    font-weight: 400;
    font-size: 12px;
    font-style: normal;
    letter-spacing: 0.4px;
    line-height: 19px;
    color: #000000;
    background-color: #d7d7d7;
    border-collapse: collapse;
    -webkit-text-stroke: 0.0px #000000;
    border-radius: 7px;
    overflow: hidden;
    border-spacing: 0px;
    margin: 4px 4px 4px 4px;
    border: 0px solid #000000;   }


/* all cells of table */
table.cn_block td,
table.cn_block_with_trad td {
    border-left: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    border-top: 0px solid #000000;
    border-bottom: 0px solid #000000;
    padding: 3px 5px 3px 5px;  }


/* topmost cells of table */
/* for the trad table, this is top two rows of cells of the table */
table.cn_block tr:first-child td,
table.cn_block_with_trad tr:first-child td,
table.cn_block_with_trad tr:nth-child(2) td {
    word-break: keep-all;
    padding-top: 8px;
    border-bottom: 2px solid #ffffff;
    border-left: 0px solid #000000;
    border-right: 0px solid #000000;
    white-space: nowrap;   }


/* second row of trad table, last cell in it */
table.cn_block_with_trad tr:nth-child(2) td:last-child {
    /* space for the "traditional" label */
    padding-right: 84px;
    /* makes it so that the :: after can be absolutely positioned relative to this current element */
    position: relative;   }


/* second row of trad table, last cell in it, pseudoelement after it */
table.cn_block_with_trad tr:nth-child(2) td:last-child::after {
    /* labels the content as traditional. looks as if it applies to entire second row */
    content: "traditional";
    position: absolute;
    right: 10px;
    bottom: 5px;
    color: white;
    font-weight: 400;    }


/*  leftmost cells of table */
table.cn_block td:first-child,
table.cn_block_with_trad td:first-child {
    border-left: 0px solid #000000;
    padding-left: 10px;  }


/* bottommost cells of table */
table.cn_block tr:last-child td,
table.cn_block_with_trad tr:last-child td {
    border-top: 2px solid #ffffff;
    padding-bottom: 7px;  }


/* rightmost cells of table */
table.cn_block td:last-child,
table.cn_block_with_trad td:last-child {
    border-right: 0px solid #000000;
    padding-right: 10px;    }


/* for when ppl click it and it goes fulldiwth */
table.cn_block.fullwidth,
table.cn_block_with_trad.fullwidth {
    position: relative;
    left: -63px;
    width: calc(100% + 440px);    }