/*
Author: Valerio Maggio < @leriomaggio >
Code: https://github.com/leriomaggio/notexbook-jupyter-theme
License: Apache License 2.0
*/

{% include "fonts_css.jinja2" %}
{% include "editors_css.jinja2" %}
{% include "dataframe_css.jinja2" %}
{% include "jupyter_light_css.jinja2" %}


/* ======================================================
                         GLOBALS
   ======================================================
*/


:root {
    /* Base colors */
    --texbook-red: #d43133;
    --texbook-pink: #D14187;
    --texbook-turquoise: #009489;
    --texbook-azure: #00afde;
    --texbook-blue: #2875d9;
    --texbook-light-grey: #828282;
    --texbook-dark-grey: rgb(56, 56, 56);

    /* Font formatting */
    --background-color: #ffffff;
    --txbk-ui-font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --txbk-ui-color: rgb(51, 51, 51);
    --txbk-ui-font-size: 14px;
    --txbk-ui-line-height: 1;

    --txbk-ui-header-font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --txbk-ui-header-color: rgb(56, 56, 56);

    --txbk-ui-mono-color: #828282;
    --txbk-ui-mono-font-size: 15px;
    --txbk-ui-mono-line-height: 1.4;

    /* Content Formatting */
    --txbk-content-font-family: "CMU Serif", "Times New Roman", serif;
    --txbk-content-font-size: {{ nb_font_size }};
    --txbk-content-color: rgb(51, 51, 51);
    --txbk-content-line-height: {{ nb_line_height }};

    --txbk-content-mono-font-family: "CMU Typewriter Text", "{{ code_mono_font }}", "Fira Code", monospace;
    --txbk-content-mono-font-size: {{ md_mono_font_size }};
    --txkb-content-mono-color: var(--texbook-dark-grey);
    --txbk-content-mono-bgcolor: var(--code-background-color);

    --txbk-code-font-family: "{{ code_mono_font }}", "Fira Code", monospace;
    --txbk-md-font-family: "{{ md_mono_font }}", "Hack", monospace;
    --txbk-code-font-size: {{ code_mono_font_size }};
    --txbk-code-line-height: 1.6;
    --txkb-code-color: var(--code-text-color);
    --txbk-code-bgcolor: var(--code-background-color);

    --link-color: #2875d9;
    --del-color: #d43133;
    --drop-cap-color: #d43133;

    --kernel-name-color: #00afde;
    --kernel-idle: #009489;
    --kernel-busy: #D14187;
    --kernel-disconnected: #d43133;
    --btn-warning: #D14187;
    --btn-danger: #d43133;
    --running-notebook: #009489;

    --cell-display-border: #009489;
    --cell-edit-border: #d43133;
}

html {
    font-size: 10px;
}

body {

    background-color: var(--background-color) !important;
    font-weight: 300;
    font-family: var(--txbk-ui-font-family);
    color: var(--txbk-ui-color);
    overflow: inherit;
    vertical-align: middle;
    font-size: var(--txbk-ui-font-size);
}

h1, h2, h3, h4, h5, h6, label > strong {
    font-family: var(--txbk-ui-header-font-family);
    color: var(--txbk-ui-header-color);
}

h1 img, h2 img , h3 img, h4 img, h5 img, h6 img {
    display: inline !important;
}

h1 {
    font-weight: bold;
    font-style: normal;
}

h2 {
    font-weight: bold;
    font-style: italic;
}

h3 {
    font-weight: 600;
    font-style: normal;
}

h4 {
    font-weight: 500;
    font-style: normal;
}

h5, h6 {
    font-weight: 500;
    font-style: italic;
}

code, kbd, pre, samp {
    font-family: var(--txbk-code-font-family);
    color: var(--txbk-ui-mono-color);
    font-weight: 400;
    font-size: var(--txbk-ui-mono-font-size);
    line-height: var(--txbk-ui-mono-line-height);
}

table > thead > tr > td.info,
table > tbody > tr > td.info,
table > tfoot > tr > td.info,
table > thead > tr > th.info,
table > tbody > tr > th.info,
table > tfoot > tr > th.info,
table > thead > tr.info > td,
table > tbody > tr.info > td,
table > tfoot > tr.info > td,
table > thead > tr.info > th,
table > tbody > tr.info > th,
table > tfoot > tr.info > th {
    background-color: #d9edf7;
}

del {
    color: var(--del-color) !important;
}

/* ======================================================
                 Intro/Home Page Server
   ======================================================
*/

#ipython-main-app p {
    text-align: justify !important;
}

.toolbar_info,
.list-container {
    color: #828282;
}

.list_placeholder {
    font-family: "Roboto Slab", serif !important;
    font-weight: 300;
    font-style: normal;
}

a.item_link {
    color: var(--link-color);
    font-weight: 300;
}

.item_buttons .kernel-name {
    color: var(--kernel-name-color);
    font-weight: 400;
}

.btn-warning {
    background-color: var(--btn-warning) !important;
    border-color: var(--btn-warning) !important;
}

.btn-warning:focus {
    border-color: var(--btn-warning) !important;
}

.btn-danger {
    background-color: var(--btn-danger) !important;
    border-color: var(--btn-danger) !important;
}

.btn-danger:focus {
    border-color: var(--btn-danger) !important;
}

.running-indicator,
.running_notebook_icon:before {
    color: var(--running-notebook);
}



/* ======================================================
                         Notebook
   ======================================================
*/

/* Modal Dialog */

.modal-header > h4 {
    font-style: normal !important;
    text-decoration: none !important;
    font-family: var(--txbk-ui-font-family) !important;
    margin: 0 !important;
}

.notebook_app {
    background-color: var(--background-color) !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: normal;
}

div#notebook_name {
    font-family: var(--txbk-ui-font-family) !important;
    font-weight: normal;
    font-size: 24px;
    padding: 1px 7px 1px 1px;
}

div#site {
	overflow: inherit;
    top: 112px;
    position: absolute;
}

#header {
    display: block;
    position: fixed !important;
    top: 0;
    width: 100%;
    max-width: 100%;
    height: fit-content;
    background-color: var(--background-color);
}

#notebook-container {
    /* Remove shadow so that it looks like a page of a PDF doc */
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    padding: 0;
}

.prompt {
    font-family: var(--txbk-code-font-family) !important;
    font-style: normal;
    font-size: 1rem;
    text-align: right;
    line-height: 1rem;
}

div#notebook {
    border-top: none;
    font-size: 1rem;
    padding: 0 !important;
    padding-top: 30px !important;
    font-family: var(--txbk-content-font-family) !important;
}

.kernel_idle_icon:before {
    color: var(--kernel-idle);
}

.kernel_busy_icon:before {
    color: var(--kernel-busy);
}

.kernel_disconnected_icon:before {
    color: var(--kernel-disconnected);
}

#notification_area {
    font-family: var(--txbk-ui-font-family);
}

#notification_kernel {
    color: #fff;
    background-color: var(--kernel-idle);
    border-color: var(--kernel-idle);
}

#notification_kernel.warning {
    color: #fff;
    background-color: var(--kernel-disconnected);
    border-color: var(--kernel-disconnected);
}

#notification_trusted {
    border-color: var(--kernel-disconnected);
}

#notification_trusted[disabled="disabled"] {
    border-color: var(--kernel-idle);
}


#notification_notebook {
    border-color: var(--kernel-idle);
}

/* -----------------------------------
    CELLS
   -----------------------------------
*/

div.cell {
    padding: 12px 0 5px 0 !important;
    right: 2px;
    border:  none;
}

div.cell .inner_cell {
    padding-left: 5px;
    border-right: 5px solid var(--background-color);
    border-left:  0.1rem dotted var(--background-color);
}

div.cell.selected {
    border-radius: 0;
}


div.cell.selected {
    border: none;
    background: none !important;
}

div.cell.selected .inner_cell {
    /* left and right border on current cell */
    border-left:  0.1rem dotted lightgrey;
    /* coloured and visible */
    border-right: 5px solid var(--cell-display-border);
    /*margin-right: -2px;*/
}

div.code_cell.selected .inner_cell {
    border-left: 0 !important;
}

.edit_mode div.code_cell.selected .inner_cell,
div.text_cell.selected.unrendered .inner_cell {
    border-left: none;
    border-right: 5px solid var(--cell-edit-border);
}

/*
Overlay with Shadow for Code Cell Selected !
*/
div.code_cell.selected, div.code_cell.selected.jupyter-soft-selected {
    border: none;
    background: transparent;
    box-shadow: 0 6px 18px #aaa;
    z-index: 10;
    top: -10px;
}

div.cell.selected:before, div.cell.selected.jupyter-soft-selected:before {
    position: absolute;
    display: none;
    top: -1px;
    left: -1px;
    width: 0;
    height: calc(100% + 2px);
    content: '';
    background: none;
}

div.cell.selected div.input:before {
    display: inline-block;
    position: absolute;
    content: "\279E";
    font-size: 1.8rem;
    top: 14px;
    /*top: 40px;*/
    width: 10px;
    left: 30px;
    /*left: 15px;*/
    color: var(--cell-display-border);
    font-weight: bold !important;
}

/* Cell Input and Output */

div.input_prompt {
    color: #aba9a9;
    font-style: normal !important;
    font-size: 1.4rem;
}

/* FIX: Fixing Empty cell output in HTML export */
div.output_prompt {
    color: transparent !important;
}

div.input_prompt bdi,
div.output_prompt bdi {
    line-height: 0;
    font-size:0;
    color: transparent;
    left: -10000px;
    content: "\21E2";

}

div.output_wrapper {
    margin-top: 8px;
}

div.output_area pre, div.output_subarea {
    font-weight: normal;
    word-break: normal;
    word-wrap: break-word;
}

div.output_area pre {
    --txbk-content-mono-font-family: var(--txbk-code-font-family);

    padding-bottom: 15px;
    padding-top: 10px;
}

/* Output Standard Error  */
div.output_stderr {
    background-color: #FFFFFF;
}

div.out_prompt_overlay:hover {
    box-shadow: none;
    background: none;
}

/* Output HTML after cell code - e.g. Pandas DataFrame */
div.output_html {
    color: var(--code-text-color);
}


div.output_html {
    font-size: 1.3rem;
    font-weight: normal;
    font-family: var(--txbk-code-font-family);
    padding-bottom: 15px;
    padding-top: 10px;
}
div.output_html > iframe, div.output_area {
    margin-left: 3rem;
}

div.output_subarea {
    margin-left: 1rem;
}

div.output_svg div {
    max-width: 98%;
    margin-left: 0 !important;
}

/* -----------------------------------
    EDIT MODE
   -----------------------------------
*/

div.input_area {
    border-radius: 0;
    border: none;
    padding: 0 5px;
}

div.cell.edit_mode {
    border-radius: 0;
    border: thin solid var(--cell-edit-border);
}

.edit_mode div.cell.selected div.input:before,
.edit_mode div.cell.selected.unrendered div.input:before {
    color: var(--cell-edit-border);
}

.code_cell div.input_prompt:after,
.code_cell div.output_prompt:after {
    display: inline-block;
    content: '';
    font-size:  0.75rem;
    font-style: normal !important;
}

.edit_mode div.cell.selected {
    border: none;
    background: none !important;
}

.edit_mode div.cell.selected:before{
    width: 0;
    background: none;
}


/* -----------------------------------
    CELLS Render
   -----------------------------------
*/

/* -- CODE CELLS -- */

/* Display + Edit modes */
div.code_cell pre, div.CodeMirror, div.CodeMirror-linenumber {
    font-family: var(--txbk-code-font-family);
    font-size: var(--txbk-code-font-size);
    line-height: var(--txbk-code-line-height);
}

div.CodeMirror-linenumber {
    --txbk-ui-mono-font-size: 12px !important;
}

/* -- MARKDOWN CELLS (Edit) -- */

/* md cell */
div.text_cell.unrendered pre {
    /* general font rule */
    font-family: var(--txbk-md-font-family);
    font-size: var(--txbk-code-font-size);
}

/* md cell headers (edit) */
.cm-header-1, .cm-header-2, .cm-header-3,
.cm-header-4, .cm-header-5, .cm-header-6 {
    /* general font rule */
    font-family: var(--txbk-md-font-family);
}

/* ------------------------------------------------------------------
        MARKDOWN CELLS (DISPLAY MODE)

        Notes: Font-families to use here:
            computer-modern --> general text (Computer Modern Typeface, CMU)
            md-display-monospace --> Monospace output (CMU Typewriter)
   ------------------------------------------------------------------
 */

div.text_cell_render {
    font-family: var(--txbk-content-font-family);
    font-size: var(--txbk-content-font-size);
    color: var(--txbk-content-color);
    font-kerning: auto;
    text-align: justify;
    display: block;
    word-break: normal;
    word-wrap: break-word;
}

div.text_cell_render a {
    color: var(--link-color);
}

div.text_cell_render h1, div.text_cell_render h2,
div.text_cell_render h3, div.text_cell_render h4,
div.text_cell_render h5, div.text_cell_render h6 {
    font-family:  var(--txbk-content-font-family);
    font-style: normal !important;
}

/* Font-sizes for headers */
div.text_cell_render h1 {
    font-size: 4.2rem !important;
    text-align: center !important;
    padding-top:  3rem;
    padding-bottom: 3rem;
}

div.text_cell_render h2 {
    font-size: 3.8rem !important;
}

div.text_cell_render h3 {
    font-size: 3.4rem !important;
}

div.text_cell_render h4 {
    font-size: 3rem !important;
}

div.text_cell_render h5 {
    font-size: 2.6rem !important;
}

div.text_cell_render h6 {
    font-size: 2.2rem !important;
    border-bottom: 1px solid rgb(204, 204, 204);
}

div.text_cell_render p,
div.text_cell_render pre,
div.text_cell_render code {
    font-size: 1em !important;
    color: var(--code-text-color)  /* REMOVED useless important clause */
}

/* Monospace Code - no code syntax highlight*/
div.text_cell_render pre {
    /* hack: using code background colour here to allow for compatibility */
    background-color: var(--code-background-color) !important;
    font-family: var(--txbk-content-mono-font-family) !important;
}

div.text_cell_render p {
    line-height: var(--txbk-content-line-height);
    text-align: justify !important;
}

/* Monospace inline rendered markdown */
div.text_cell_render p code {
    background-color: var(--txbk-content-mono-bgcolor) !important;
    font-size: var(--txbk-content-mono-font-size) !important;
}

div.text_cell_render p strong code {
    font-weight: bold !important;
}

div.text_cell_render p em code {
    font-style: italic !important;
}

div.text_cell_render pre code {

    /*--txbk-ui-mono-line-height: 1.3;*/

    font-size: 1em !important;
    padding: 1rem 1.5rem;
    display: block !important;
    color: var(--txkb-content-mono-color) !important;
    background-color: var(--txbk-content-mono-bgcolor) !important;
    font-family: var(--txbk-content-mono-font-family) !important;
    word-wrap: break-word;
    word-break: normal;
}

div.text_cell_render blockquote {
    --txbk-ui-color: #6f6f6f !important;

    margin: 2rem .2rem !important;
    padding: .3rem .5rem !important;
    border-left: .3rem solid #a7a7a7 !important;
}

div.text_cell_render blockquote p {
    padding: .2rem 1.5rem;
}

div.text_cell_render table {
    font-size: var(--txbk-content-font-size) !important;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    overflow: auto;
    break-inside: auto;
    text-align: left;
    margin-top: 25px;
}

div.text_cell_render table thead {
    display: table-header-group;
    vertical-align: middle !important;
    border-bottom: none !important;
}

div.text_cell_render table thead tr,
div.text_cell_render table thead tr th,
div.text_cell_render table thead tr td,
div.text_cell_render table tbody tr,
div.text_cell_render table tbody tr th,
div.text_cell_render table tbody tr td {
    break-inside: avoid;
    break-after: auto;
    text-align: left !important;
    vertical-align: middle !important;
    padding: 0 !important;
}

div.text_cell_render table tr th {
    border-bottom-width: 0;
}

div.text_cell_render ul, div.text_cell_render ol {
    position: relative;
    display: block;
    margin-bottom: 0 !important;
    line-height: var(--txbk-content-line-height);
}

div.text_cell_render ul {
    list-style-type: disc;
}

div.text_cell_render ul li, div.text_cell_render ol li {
    /*white-space: pre-wrap;*/
    padding: .8rem !important;
}

div.text_cell_render ul li > code, div.text_cell_render ol li > code {
    font-size: .9em !important;
}

div.text_cell_render ul li a code, div.text_cell_render ol li a code {
    font-size: .9em !important;
}

div.text_cell_render ul ul {
    list-style-type: circle !important;
}

div.text_cell_render ul ul,
div.text_cell_render ul ol,
div.text_cell_render ol ul,
div.text_cell_render ol ol {
    padding-top: .5rem !important;
}

div.text_cell_render ul li > ul li,
div.text_cell_render ul li > ol li,
div.text_cell_render ol li > ul li,
div.text_cell_render ol li > ol li {
    padding: .5rem !important;
}

div.text_cell_render ul li > ul li code,
div.text_cell_render ul li > ol li code,
div.text_cell_render ol li > ul li code,
div.text_cell_render ol li > ol li code {
    font-size: .9em !important;
}

div.text_cell_render ul li > ul li a code,
div.text_cell_render ul li > ol li a code,
div.text_cell_render ol li > ul li a code,
div.text_cell_render ol li > ol li a code {
    font-size: .9em !important;
    color: var(--link-color);
}

div.text_cell_render ul ul ul {
    list-style-type: square !important;
}

div.text_cell_render p > img:only-child {
    display: block;
    margin: auto;
    max-width: 70% !important;
}

div.text_cell_render img {
    max-width: 70%;
}

.rendered_html code {
    background-color: transparent !important;
}

/*
    ===================================

    New CSS Classes and Styles

    ===================================
*/

/* ------------
    Footnotes
   ------------
*/
[id^='fn'], [class^='fn'] {
    font-size: small !important;
    font-weight: normal !important;
    font-style: normal !important;
    border-top: 1px solid var(--txbk-ui-mono-color);
    padding-top: .8rem;
    display: block;
}

p > [id^='fn']:not(:first-child),
p > [class^='fn']:not(:first-child) {
    border-top: 0 !important;
}

[id^='fn'] i, [class^='fn'] i, p > strong > strong {
    background-color: var(--txbk-content-mono-bgcolor);
    font-style: normal !important;
    font-weight: bold !important;
    text-transform: capitalize;
}

/* FIX Forcing monospace code to adhere with footnotes rules!*/
div.text_cell_render p [id^='fn'] > code, div.text_cell_render p [class^='fn'] > code {
    font-size: 1em !important;
}

/* ------------
    Drop cap
   ------------
*/
.drop {
    color: var(--drop-cap-color);
    float: left;
    font-size: 75px;
    line-height: 60px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
    margin-top: 0.2rem;
}


/* -----------------------------
    TexBook Text colors classes
   -----------------------------
*/
.texbook-red {
    color: var(--texbook-red);
}

.texbook-pink {
    color: var(--texbook-pink);
}

.texbook-turquoise {
    color: var(--texbook-turquoise);
}

.texbook-azure {
    color: var(--texbook-azure);
}

.texbook-blue {
    color: var(--texbook-blue);
}

.texbook-light-grey {
    color: var(--texbook-light-grey);
}

.texbook-dark-grey {
    color: var(--texbook-dark-grey);
}

/* ---------------------------------------------------------
    IMG MaxWidthXX
    CSS classes to control the max-width property of images
    when the default 70% is not enough.
    This is when images need to be enlarged or shrunk.
    Percentage of max-width supported are:
    - 10%
    - 15%
    - 20%
    - 25%
    - 30%
    - 40%
    - 50%
    - 80%
    - 85%
    - 90%
    - 100%
   ---------------------------------------------------------
*/

div.text_cell_render img.maxw10,
div.text_cell_render p > img.maxw10 {
    max-width: 10% !important;
}

div.text_cell_render img.maxw15,
div.text_cell_render p > img.maxw15 {
    max-width: 15% !important;
}

div.text_cell_render img.maxw20,
div.text_cell_render p > img.maxw20 {
    max-width: 20% !important;
}

div.text_cell_render img.maxw25,
div.text_cell_render p > img.maxw25 {
    max-width: 25% !important;
}

div.text_cell_render img.maxw30,
div.text_cell_render p > img.maxw30 {
    max-width: 30% !important;
}

div.text_cell_render img.maxw40,
div.text_cell_render p > img.maxw40 {
    max-width: 40% !important;
}

div.text_cell_render img.maxw50,
div.text_cell_render p > img.maxw50 {
    max-width: 50% !important;
}

div.text_cell_render img.maxw80,
div.text_cell_render p > img.maxw80 {
    max-width: 80% !important;
}

div.text_cell_render img.maxw85,
div.text_cell_render p > img.maxw85 {
    max-width: 85% !important;
}

div.text_cell_render img.maxw90,
div.text_cell_render p > img.maxw90 {
    max-width: 90% !important;
}

div.text_cell_render img.maxw100,
div.text_cell_render p > img.maxw100 {
    max-width: 100% !important;
}

.badges img, .badges p img {
    margin: 0 !important;  /* Override margins */
    display: inline !important;
    padding-right: 7px;
}

.badges p {
    display: inline !important;
}

.badges {
    display: block;
    text-align: center;
}
