*, *::before, *::after { box-sizing: border-box; }

:root {
  --font-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: Menlo, Monaco, Consolas, "Courier New", monospace;
  --link: #337ab7;
  --link-hover: #23527c;
  --border: #ddd;
  --input-border: #cfcfcf;
  --input-bg: #f7f7f7;
  --prompt-in: #303F9F;
  --prompt-out: #D84315;
  --selected: #42A5F5;
  --shadow: 0 0 12px 1px rgba(87, 87, 87, 0.2);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

html, body { margin: 0; }
body { font: 13px/1.42857143 var(--font-ui); color: #000; background: #fff; }
body.page-notebook, body.page-edit { background: #EEE; }
a { color: var(--link); text-decoration: none; }
a:hover, a:focus { color: var(--link-hover); text-decoration: underline; }
button, select { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid #66afe9; outline-offset: 1px; }

.skip-link { position: absolute; top: 4px; left: 4px; z-index: 100; padding: 6px 10px; color: #fff; background: var(--link); border-radius: 2px; transform: translateY(-200%); }
.skip-link:focus { transform: none; color: #fff; }

.container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 15px; }
@media (max-width: 1199px) { .container { max-width: 940px; } }
@media (max-width: 991px) { .container { max-width: 720px; } }
@media (max-width: 767px) { .container { max-width: none; } }

/* Header */
#header { background: #fff; box-shadow: var(--shadow); position: relative; z-index: 100; }
.page-notebook #header, .page-edit #header { position: sticky; top: 0; }
#header-container { display: flex; align-items: center; gap: 12px; min-height: 28px; padding-block: 5px 7px; }
#header-container.is-hidden { display: none; }
#ipython_notebook { display: inline-flex; align-items: center; gap: 2px; color: #4E4E4E; text-decoration: none; flex: none; }
#ipython_notebook:hover { color: #4E4E4E; text-decoration: none; }
.logo-mark { width: 24px; height: 28px; }
.logo-text { font: 400 26px/1 var(--font-ui); letter-spacing: -0.02em; padding-bottom: 3px; }
#save_widget { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; padding-left: 4px; }
#notebook_name { font-size: 146.5%; padding: 2px 4px; border-radius: 2px; overflow-wrap: anywhere; }
.checkpoint_status { color: #777; font-size: 12px; white-space: nowrap; }

/* Tree */
#tree { padding-top: 15px; padding-bottom: 30px; }
.nav-tabs { display: flex; margin: 0 0 4px; padding: 0; list-style: none; border-bottom: 1px solid var(--border); }
.nav-tabs li { margin-bottom: -1px; }
.nav-tabs a { display: block; padding: 6px 14px; line-height: 1.42857143; border: 1px solid transparent; border-radius: 2px 2px 0 0; }
.nav-tabs a:hover { background: #eee; border-color: #eee #eee var(--border); text-decoration: none; }
.nav-tabs .active a, .nav-tabs .active a:hover { color: #555; background: #fff; border-color: var(--border) var(--border) transparent; cursor: default; }
.list-container { margin-top: 12px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 2px; }
.list-header, .list-item { display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 7px; line-height: 22px; }
.list-header { justify-content: space-between; flex-wrap: wrap; font-weight: bold; background: #EEE; border-bottom: 1px solid var(--border); }
.list-item { border-bottom: 1px solid var(--border); }
.list-item:last-child { border-bottom: 0; }
.list-item:hover { background: #fafafa; }
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; }
.breadcrumb svg { width: 15px; height: 15px; display: block; }
.crumb-divider { padding-inline: 3px; color: #000; font-weight: normal; }
.list-columns { display: flex; align-items: center; margin-left: auto; color: #333; font-weight: normal; }
.list-columns > span { padding-inline: 8px; }
.sort-arrow { font-size: 11px; }
.item-name { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.item-link { overflow-wrap: anywhere; }
.item-icon { display: inline-flex; flex: none; width: 16px; height: 16px; color: #555; }
.item-icon svg { width: 100%; height: 100%; }
.notebook-icon { color: #5a5a5a; }
.item-modified { width: 120px; flex: none; text-align: right; color: #333; }
.item-size { width: 80px; flex: none; text-align: right; color: #333; }
.list-columns .item-name-col { padding-right: 24px; }
.list-placeholder { padding: 4px 7px; font-weight: bold; text-align: center; }

/* Menubar and toolbar */
#menubar-container { padding-bottom: 4px; }
#menubar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px; min-height: 30px; margin-top: 1px; background: #f8f8f8; border: 1px solid #e7e7e7; border-radius: 0; }
.menus { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.menu { position: relative; }
.menu-toggle { display: block; padding: 5px 10px 6px; border: 0; background: none; color: #333; line-height: 18px; cursor: default; }
button.menu-toggle:hover, .menu-toggle[aria-expanded="true"] { color: #333; background: #e7e7e7; }
.menu-toggle.is-inert { color: #333; }
.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; min-width: 160px; margin: 0; padding: 5px 0; list-style: none; background: #fff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 2px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); }
.dropdown-menu[hidden] { display: none; }
.dropdown-menu a, .dropdown-menu button { display: block; width: 100%; padding: 3px 20px; border: 0; background: none; color: #333; line-height: 1.42857143; text-align: left; white-space: nowrap; cursor: default; }
.dropdown-menu a:hover, .dropdown-menu button:hover, .dropdown-menu a:focus, .dropdown-menu button:focus { color: #262626; background: #f5f5f5; text-decoration: none; }
.dropdown-menu .divider { height: 1px; margin: 4px 1px; background: #e5e5e5; }
.menubar-right { display: flex; align-items: center; gap: 6px; padding-right: 8px; margin-left: auto; }
.notification_widget { padding: 1px 6px; border: 1px solid #ccc; border-radius: 2px; background: #fff; color: #333; font-size: 12px; line-height: 18px; }
.notification_widget[hidden] { display: none; }
.kernel_indicator_name, .mode_indicator { padding-left: 4px; color: #333; }
.kernel_indicator { width: 12px; height: 12px; border: 1.5px solid #333; border-radius: 50%; }
#maintoolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-block: 5px 2px; }
#maintoolbar.is-hidden { display: none; }
.btn-group { display: inline-flex; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px; padding: 2px 8px; border: 1px solid #ccc; background: #fff; color: #333; border-radius: 2px; cursor: pointer; }
.btn svg { width: 14px; height: 14px; }
.btn:hover { background: #e6e6e6; border-color: #adadad; color: #333; text-decoration: none; }
.btn:active { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.btn-group .btn + .btn { margin-left: -1px; }
.btn-group .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
#cell_type { height: 28px; width: auto; padding: 2px 4px; border: 1px solid #ccc; border-radius: 2px; background: #fff; color: #333; font-size: 13px; }
#cell_type:disabled { opacity: 1; cursor: default; }

/* Notebook */
#site { padding: 15px 0 60px; }
#notebook-container, #texteditor-container { padding: 15px; background: #fff; box-shadow: var(--shadow); min-height: 200px; font-size: 14px; line-height: 20px; }
.notebook-loading { padding: 10px; color: #777; }
.cell { position: relative; display: flex; flex-direction: column; width: 100%; padding: 5px; margin: 0; border: 1px solid transparent; border-radius: 2px; outline: none; }
.cell.selected { border-color: #ababab; }
.cell.selected::before { content: ""; position: absolute; top: -1px; left: -1px; width: 5px; height: calc(100% + 2px); background: var(--selected); border-radius: 2px 0 0 2px; }
.input, .output_area, .text_cell { display: flex; flex-direction: row; align-items: stretch; }
.text_cell { flex-direction: row; }
.prompt { flex: none; min-width: 14ex; padding: 0.4em; margin: 0; font-family: var(--font-mono); font-size: 14px; line-height: 1.21429em; text-align: right; cursor: default; user-select: none; }
.input_prompt { color: var(--prompt-in); border-top: 1px solid transparent; }
.output_prompt { color: var(--prompt-out); }
.inner_cell { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.input_area { border: 1px solid var(--input-border); border-radius: 2px; background: var(--input-bg); line-height: 1.21429em; }
.CodeMirror { display: flex; overflow-x: auto; font-family: var(--font-mono); font-size: 14px; line-height: 1.21429em; }
.CodeMirror-gutter { display: none; flex: none; min-width: 2.5em; padding: 4px 3px 4px 5px; color: #999; text-align: right; white-space: pre; border-right: 1px solid var(--border); background: var(--input-bg); user-select: none; }
.show-line-numbers .CodeMirror-gutter { display: block; }
.CodeMirror-code { flex: 1; margin: 0; padding: 4px 0.4em; font: inherit; white-space: pre; tab-size: 4; color: #000; }
.cm-keyword { color: #008000; font-weight: bold; }
.cm-builtin { color: #008000; }
.cm-def { color: #0000ff; }
.cm-string { color: #BA2121; }
.cm-comment { color: #408080; font-style: italic; }
.cm-number { color: #080; }
.cm-operator { color: #AA22FF; }
.cm-word { font-weight: bold; }
.output_wrapper { display: flex; flex-direction: column; margin-top: 2px; }
.output_wrapper.is-collapsed { display: none; }
.output { display: flex; flex-direction: column; }
.output_subarea { flex: 1; min-width: 0; max-width: calc(100% - 14ex); padding: 0.4em; overflow-x: auto; }
.output_text { text-align: left; color: #000; line-height: 1.21429em; }
.output_subarea pre { margin: 0; padding: 1px 0; font-family: var(--font-mono); font-size: 14px; line-height: 1.21429em; white-space: pre-wrap; overflow-wrap: anywhere; background: transparent; border: 0; }
.output_stderr { background: #fdd; }
.output_error pre { white-space: pre; }
.output_png img { display: block; }

.text_cell_render { padding: 0.5em 0.5em 0.5em 0.4em; color: #000; outline: none; }
.rendered_html { color: #000; overflow-wrap: break-word; }
.rendered_html > :first-child { margin-top: 0.538em; }
.rendered_html h1 { font-size: 185.7%; margin: 1.08em 0 0; font-weight: bold; line-height: 1; }
.rendered_html h2 { font-size: 157.1%; margin: 1.27em 0 0; font-weight: bold; line-height: 1; }
.rendered_html h3 { font-size: 128.6%; margin: 1.55em 0 0; font-weight: bold; line-height: 1; }
.rendered_html h4 { font-size: 100%; margin: 2em 0 0; font-weight: bold; line-height: 1; }
.rendered_html h5, .rendered_html h6 { font-size: 100%; margin: 2em 0 0; font-weight: bold; font-style: italic; line-height: 1; }
.rendered_html h1:first-child { margin-top: 0.538em; }
.rendered_html h2:first-child { margin-top: 0.636em; }
.rendered_html h3:first-child { margin-top: 0.777em; }
.rendered_html h4:first-child, .rendered_html h5:first-child, .rendered_html h6:first-child { margin-top: 1em; }
.rendered_html p { margin: 1em 0 0; text-align: left; }
.rendered_html > p:first-child { margin-top: 0; }
.rendered_html ul, .rendered_html ol { margin: 1em 0 0; padding-left: 2em; }
.rendered_html li > p { margin: 0; }
.rendered_html blockquote { margin: 1em 2em 0; }
.rendered_html hr { margin: 1em 0 0; border: 0; border-top: 1px solid #eee; }
.rendered_html :not(pre) > code { padding: 1px 5px; background: #eff0f1; font-family: var(--font-mono); font-size: 0.9em; }
.rendered_html pre { margin: 1em 0 0; padding: 0; font-family: var(--font-mono); font-size: 14px; line-height: 1.21429em; overflow-x: auto; }
.rendered_html img { display: block; margin-inline: auto; }
.anchor-link { padding: 0 20px; color: var(--link); visibility: hidden; text-decoration: none; }
.rendered_html :is(h1, h2, h3, h4, h5, h6):hover .anchor-link { visibility: visible; }
.rendered_html table { margin: 1em 0 0; border: none; border-collapse: collapse; border-spacing: 0; color: #000; font-size: 12px; table-layout: fixed; }
.output_html.rendered_html table { margin-top: 0; }
.rendered_html thead { border-bottom: 1px solid #000; vertical-align: bottom; }
.rendered_html tr, .rendered_html th, .rendered_html td { padding: 0.5em; text-align: right; vertical-align: middle; line-height: normal; white-space: normal; border: none; }
.rendered_html th { font-weight: bold; }
.rendered_html tbody tr:nth-child(odd) { background: #f5f5f5; }
.rendered_html tbody tr:hover { background: rgba(66, 165, 245, 0.2); }

.ansi-bold { font-weight: bold; }
.ansi-black-fg { color: #3E424D; } .ansi-black-intense-fg { color: #282C36; }
.ansi-red-fg { color: #E75C58; } .ansi-red-intense-fg { color: #B22B31; }
.ansi-green-fg { color: #00A250; } .ansi-green-intense-fg { color: #007427; }
.ansi-yellow-fg { color: #DDB62B; } .ansi-yellow-intense-fg { color: #B27D12; }
.ansi-blue-fg { color: #208FFB; } .ansi-blue-intense-fg { color: #0065CA; }
.ansi-magenta-fg { color: #D160C4; } .ansi-magenta-intense-fg { color: #A03196; }
.ansi-cyan-fg { color: #60C6C8; } .ansi-cyan-intense-fg { color: #258F8F; }
.ansi-white-fg { color: #C5C1B4; } .ansi-white-intense-fg { color: #A1A6B2; }
.ansi-black-bg { background: #3E424D; } .ansi-red-bg { background: #E75C58; } .ansi-green-bg { background: #00A250; } .ansi-yellow-bg { background: #DDB62B; }
.ansi-blue-bg { background: #208FFB; } .ansi-magenta-bg { background: #D160C4; } .ansi-cyan-bg { background: #60C6C8; } .ansi-white-bg { background: #C5C1B4; }

/* Text editor */
#texteditor-container { padding: 0; }
.CodeMirror.editor { background: #fff; }
.CodeMirror.editor .CodeMirror-gutter { background: #f7f7f7; }
.truncated-note { margin: 0; padding: 8px 12px; border-top: 1px solid var(--border); color: #777; font-size: 13px; }

.notebook-error { margin: 10px; padding: 10px 15px; color: #a94442; background: #f2dede; border: 1px solid #ebccd1; border-radius: 2px; }
.notebook-error h2 { margin: 0 0 4px; font-size: 14px; }
.notebook-error p { margin: 0; }
.error-page { padding-block: 20px; }
.error-page h1 { margin: 0 0 10px; font-size: 36px; font-weight: 500; line-height: 1.1; }

@media (max-width: 767px) {
  .item-modified { display: none; }
  .list-columns .item-modified { display: none; }
  .prompt { min-width: 9ex; padding-inline: 0.2em; font-size: 12px; }
  .output_subarea { max-width: calc(100% - 9ex); }
  #site { padding-top: 0; }
  #notebook-container { padding: 8px 4px; box-shadow: none; }
  .CodeMirror, .output_subarea pre { font-size: 13px; }
  .checkpoint_status { display: none; }
}

@media (max-width: 480px) {
  .prompt { min-width: 0; width: 100%; text-align: left; padding: 0.2em 0.4em 0.1em; }
  .input, .output_area, .text_cell { flex-direction: column; }
  .text_cell .prompt, .output_area .prompt:empty { display: none; }
  .output_subarea { max-width: 100%; }
}