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

    &.selected {
        border-color: @border_color;
        /* Don't border the cells when printing */
        @media print {
            border-color: transparent;
        }
    }

    .edit_mode &.selected {
        border-color: green;
        /* Don't border the cells when printing */
        @media print {
            border-color: transparent;
        }
    }

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

.prompt {
    /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
    min-width: 14ex;
    /* 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: @screen-xs-min) {
    // prompts are in the main column on small screens,
    // so text should be left-aligned
    .prompt {
        text-align: left;
    }
}

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

@-moz-document url-prefix() {
    div.inner_cell {
        // hack around FF bug causing cell to expand when lines are long
        // instead of scrolling
        overflow-x: hidden;
    }
}

/* 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;
}

div.unrecognized_cell {
    // from text_cell
    padding: 5px 5px 5px 0px;
    .hbox();
    
    .inner_cell {
        .border-radius(@border-radius-base);
        padding: 5px;
        font-weight: bold;
        color: red;
        border: 1px solid @light_border_color;
        background: darken(@cell_background, 5%);
        // remove decoration from link
        a {
            color: inherit;
            text-decoration: none;

            &:hover {
                color: inherit;
                text-decoration: none;
            }
        }
    }
}
@media (max-width: @screen-xs-min) {
    // remove prompt indentation on small screens
    div.unrecognized_cell > div.prompt {
        display: none;
    }
}