div.cell {
    border: 1px solid transparent;
    .vbox();
    .corner-all();
    .border-box-sizing();
    border-width: thin;
    border-style: solid;

    &.selected {
        border-color: @border_color;
    }

    &.edit_mode {
        border-color: green;
    }

    width: 100%;
    padding: 5px 5px 5px 0px;
    /* This acts as a spacer between cells, that is outside the border */
    margin: 0px;
    outline: none;
}

div.prompt {
    /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
    min-width: 15ex;
    /* This padding is tuned to match the padding on the CodeMirror editor. */
    padding: @code_padding;
    margin: 0px;
    font-family: @font-family-monospace;
    text-align: right;
    /* This has to match that of the the CodeMirror class line-height below */	
    line-height: @code_line_height;
}

@media (max-width: 480px) {
    // prompts are in the main column on small screens,
    // so text should be left-aligned
    div.prompt {
        text-align: left;
    }
}

div.inner_cell {
    .vbox();
    .box-flex1();
}

/* input_area and input_prompt must match in top border and margin for alignment */
div.input_area {
    border: 1px solid @light_border_color;
    .corner-all;
    background: @cell_background;
    line-height: @code_line_height;
}

/* This is needed so that empty prompt areas can collapse to zero height when there
   is no content in the output_subarea and the prompt. The main purpose of this is
   to make sure that empty JavaScript output_subareas have no height. */
div.prompt:empty {
    padding-top: 0;
    padding-bottom: 0;
}