* {
    box-sizing: border-box}

body {
    margin: 0;
    font: 400 10pt Noto Sans, Segoe UI, Liberation Sans, sans-serif}

button {
    font: 400 10pt Noto Sans, Segoe UI, Liberation Sans, sans-serif;
    background: #FFF;
    color: #000;
    border: 0;
    padding: 4px 12px}

.toolbar {
    background: #444;
    color: #fff;
    text-align: right}

.toolbar button {
    background: #333;
    color: #fff}

.toolbar button:active {
    background: #3A3A3A;
}

.cell {
    display: block;
    padding: 8px;
    position: absolute}

.cell textarea {
    width: 100%;
    height: 100%;
    tab-size: 4;
    font: 400 10pt "IBM Plex Mono", "Cousine", "Noto Mono", "Consolas", monospace;
    background: #FFF;
    color: #000;
    border: 1px solid #444;
    padding: 8px;
    padding-top: 2em}

.cell .readonly {
    background: #444;
    color: #EEE}

.celltop {
    margin: 9px;
    padding: 5px 9px;
    position: absolute;
    top: 0;
    left: 0;
    background: #444;
    color: #DDD}

.popup {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;}

.popup-content {
    padding: 10px;
    background: #FFF;
    color: #000;
    border-radius: 10px;    
}

.popup-content td {
    padding: 8px}

.popup-content input {
    border: 1px solid #777;
    padding: 4px}

.popup-content button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #08F;
    padding: 5px;
    border-radius: 5px;
    border: 0;
    color: #FFF}