div.code_cell {
    /* avoid page breaking on code cells when printing */
    @media print {
        page-break-inside: avoid;
    }
}

/* any special styling for code cells that are currently running goes here */
div.code_cell.running {
}

div.input {
    page-break-inside: avoid;
    .hbox();
}

@media (max-width: @screen-xs-min) {
    // move prompts above code on small screens
    div.input {
        .vbox();
    }
}

div.prompt_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    text-align: right;
}

/* input_area and input_prompt must match in top border and margin for alignment */
div.input_prompt {
    color: @input_prompt_color;
    border-top: 1px solid transparent;
}

div.run_this_cell {
    display: none;
    cursor: pointer;
    color: #333;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 2ex;
    padding-right: 2ex;
    width: 1ex;
}

// set the prompt width
div.prompt {
    min-width: 15ex;
}

@media (-moz-touch-enabled: 1), (any-pointer: coarse) {
    div.run_this_cell {
        display: block;
    }
}

// The styles related to div.highlight are for nbconvert HTML output only. This works
// because the .highlight div isn't present in the live notebook. We could put this into
// nbconvert, but it easily falls out of sync, can't use our less variables and doesn't
// help the basic template when paired with our CSS.

div.input_area > div.highlight {
    margin: @code_padding;
    border: none;
    padding: 0px;
    background-color: transparent;
}

div.input_area > div.highlight > pre {
    margin: 0px;
    border: none;
    padding: 0px;
    background-color: transparent;
}
