/*

originally extracted from https://gist.github.com/magican/5574556

Most colors defined here are overridden by javascript which adds css based on
values in the server config file notebook.json, which can be edited directly,
or colors can be selected in the nbextensions_configurator
*/



/*background color for links when you mouse over it */
#toc-wrapper li > span:hover {
  background-color: #DAA520;
}

#toc a {
  color: #333333;  /* default - alterable via nbextension-configurator */
  text-decoration: none;
}
#navigate_menu li > span:hover {background-color: #f1f1f1}


/* Move menus and tooolbar to the left, following @Kevin-McIsaac suggestion
This is now done in javascript, if the relevant option is selected
div#menubar-container, div#header-container {
width: auto;
padding-left: 20px;
}*/

#navigate_menu {
  list-style-type: none;
  max-width: 800px;
  min-width: 100px;
  width: 250px;
  overflow: auto;
}


#navigate_menu a {
  list-style-type: none;
  color: #333333;    /* default - alterable via nbextension-configurator */
  text-decoration: none;
}

#navigate_menu li  {
  padding-left: 0px;
  clear: both;
  list-style-type: none;
}

#navigate_menu > .toc-item,
#navigate_menu ul {
  padding-left: 0px;
}

.toc {
  padding: 0px;
  overflow-y: auto;
  font-weight: normal;
  color: #333333;    /* default - alterable via nbextension-configurator */
  white-space: nowrap;
  overflow-x: auto;
}

.text_cell .toc {
  margin-top: 1em;
}

.toc ul.toc-item {
    list-style-type: none;
    padding: 0;
    margin:  0;
}

#toc-wrapper {
  z-index: 90;
  position: fixed !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px;
  border-style: solid;
  border-width: thin;
  background-color: #fff;   /* default - alterable via nbextension-configurator */
}

#toc-wrapper .toc {
  flex-grow: 1;
}

.float-wrapper {
  border-color: rgba(0, 0, 0, 0.38);
  border-radius: 5px;
  opacity: .8;
}

.sidebar-wrapper {
  top: 0;
  bottom: 0;
    width: 212px;
    border-color: #eeeeee;  /* default - alterable via nbextension-configurator */
}

.sidebar-wrapper .ui-resizable-se {
  display: none;
}

.sidebar-wrapper .ui-resizable-e {
  position: absolute;
  top: calc(50% - 8px);
}

#toc-wrapper.closed {
  min-width: 100px;
  width: auto;
  transition: width;
}
#toc-wrapper:hover{
  opacity: 1;
}
#toc-wrapper .header {
  font-size: 18px;
  font-weight: bold;
}

.sidebar-wrapper .hide-btn {
  display:none;
}

#toc-wrapper .hide-btn:before {
  content: "\f147";
}

#toc-wrapper.closed .hide-btn:before {
  content: "\f196";
}

#toc-header .fa {
  font-size: 14px;
  text-decoration: none;
}

/* on scroll style */
.highlight_on_scroll {
    border-left: solid 4px blue;
}

.toc-item li { margin:0; padding:0; color:black }
.toc-item li > span { display:block }
.toc-item li > span { padding-left:0em }
.toc-item li li > span { padding-left:1em }
.toc-item li li li > span { padding-left:2em }
.toc-item li li li li > span { padding-left:3em }
.toc-item li li li li li > span { padding-left:4em }
.toc-item li li li li li li > span { padding-left:5em }


#toc-wrapper .toc-item-num {
    font-family: Georgia, Times New Roman, Times, serif;
    color: black;  /* default - alterable via nbextension-configurator */
}

/*
These colors are now specified in js, after reading the extension's config stored in system
and updated using the nbextension-configurator
.toc-item-highlight-select  {background-color: Gold}
.toc-item-highlight-execute  {background-color: red}
.toc-item-highlight-execute.toc-item-highlight-select   {background-color: Gold} */

#toc-header .fa ,
.toc-item .fa-fw:first-child {
  cursor: pointer;
}

#toc-header,
.modal-header {
  cursor: move;
}

.tocSkip {
  display: none;
}
