/* BASICS */

.CodeMirror {
    /* Set height, width, borders, and global font properties here */
    font-family: monospace;
    height: 300px;
    color: black;
    direction: ltr;
  }
  
  /* PADDING */
  
  .CodeMirror-lines {
    padding: 4px 0; /* Vertical padding around content */
  }
  .CodeMirror pre.CodeMirror-line,
  .CodeMirror pre.CodeMirror-line-like {
    padding: 0 4px; /* Horizontal padding of content */
  }
  
  .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
    background-color: white; /* The little square between H and V scrollbars */
  }
  
  /* GUTTER */
  
  .CodeMirror-gutters {
    border-right: 1px solid #ddd;
    background-color: #f7f7f7;
    white-space: nowrap;
  }
  .CodeMirror-linenumbers {}
  .CodeMirror-linenumber {
    padding: 0 3px 0 5px;
    min-width: 20px;
    text-align: right;
    color: #999;
    white-space: nowrap;
  }
  
  .CodeMirror-guttermarker { color: black; }
  .CodeMirror-guttermarker-subtle { color: #999; }
  
  /* CURSOR */
  
  .CodeMirror-cursor {
    border-left: 1px solid black;
    border-right: none;
    width: 0;
  }
  /* Shown when moving in bi-directional text */
  .CodeMirror div.CodeMirror-secondarycursor {
    border-left: 1px solid silver;
  }
  .cm-fat-cursor .CodeMirror-cursor {
    width: auto;
    border: 0 !important;
    background: #7e7;
  }
  .cm-fat-cursor div.CodeMirror-cursors {
    z-index: 1;
  }
  .cm-fat-cursor-mark {
    background-color: rgba(20, 255, 20, 0.5);
    -webkit-animation: blink 1.06s steps(1) infinite;
    -moz-animation: blink 1.06s steps(1) infinite;
    animation: blink 1.06s steps(1) infinite;
  }
  .cm-animate-fat-cursor {
    width: auto;
    border: 0;
    -webkit-animation: blink 1.06s steps(1) infinite;
    -moz-animation: blink 1.06s steps(1) infinite;
    animation: blink 1.06s steps(1) infinite;
    background-color: #7e7;
  }
  @-moz-keyframes blink {
    0% {}
    50% { background-color: transparent; }
    100% {}
  }
  @-webkit-keyframes blink {
    0% {}
    50% { background-color: transparent; }
    100% {}
  }
  @keyframes blink {
    0% {}
    50% { background-color: transparent; }
    100% {}
  }
  
  /* Can style cursor different in overwrite (non-insert) mode */
  .CodeMirror-overwrite .CodeMirror-cursor {}
  
  .cm-tab { display: inline-block; text-decoration: inherit; }
  
  .CodeMirror-rulers {
    position: absolute;
    left: 0; right: 0; top: -50px; bottom: 0;
    overflow: hidden;
  }
  .CodeMirror-ruler {
    border-left: 1px solid #ccc;
    top: 0; bottom: 0;
    position: absolute;
  }
  
  /* DEFAULT THEME */
  
  .cm-s-default .cm-header {color: blue;}
  .cm-s-default .cm-quote {color: #090;}
  .cm-negative {color: #d44;}
  .cm-positive {color: #292;}
  .cm-header, .cm-strong {font-weight: bold;}
  .cm-em {font-style: italic;}
  .cm-link {text-decoration: underline;}
  .cm-strikethrough {text-decoration: line-through;}
  
  .cm-s-default .cm-keyword {color: #708;}
  .cm-s-default .cm-atom {color: #219;}
  .cm-s-default .cm-number {color: #164;}
  .cm-s-default .cm-def {color: #00f;}
  .cm-s-default .cm-variable,
  .cm-s-default .cm-punctuation,
  .cm-s-default .cm-property,
  .cm-s-default .cm-operator {}
  .cm-s-default .cm-variable-2 {color: #05a;}
  .cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
  .cm-s-default .cm-comment {color: #a50;}
  .cm-s-default .cm-string {color: #a11;}
  .cm-s-default .cm-string-2 {color: #f50;}
  .cm-s-default .cm-meta {color: #555;}
  .cm-s-default .cm-qualifier {color: #555;}
  .cm-s-default .cm-builtin {color: #30a;}
  .cm-s-default .cm-bracket {color: #997;}
  .cm-s-default .cm-tag {color: #170;}
  .cm-s-default .cm-attribute {color: #00c;}
  .cm-s-default .cm-hr {color: #999;}
  .cm-s-default .cm-link {color: #00c;}
  
  .cm-s-default .cm-error {color: #f00;}
  .cm-invalidchar {color: #f00;}
  
  .CodeMirror-composing { border-bottom: 2px solid; }
  
  /* Default styles for common addons */
  
  div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
  div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
  .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
  .CodeMirror-activeline-background {background: #e8f2ff;}
  
  /* STOP */
  
  /* The rest of this file contains styles related to the mechanics of
     the editor. You probably shouldn't touch them. */
  
  .CodeMirror {
    position: relative;
    overflow: hidden;
    background: white;
  }
  
  .CodeMirror-scroll {
    overflow: scroll !important; /* Things will break if this is overridden */
    /* 30px is the magic margin used to hide the element's real scrollbars */
    /* See overflow: hidden in .CodeMirror */
    margin-bottom: -30px; margin-right: -30px;
    padding-bottom: 30px;
    height: 100%;
    outline: none; /* Prevent dragging from highlighting the element */
    position: relative;
  }
  .CodeMirror-sizer {
    position: relative;
    border-right: 30px solid transparent;
    padding-left: 45px;
  }
  
  /* The fake, visible scrollbars. Used to force redraw during scrolling
     before actual scrolling happens, thus preventing shaking and
     flickering artifacts. */
  .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
    position: absolute;
    z-index: 6;
    display: none;
  }
  .CodeMirror-vscrollbar {
    right: 0; top: 0;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .CodeMirror-hscrollbar {
    bottom: 0; left: 0;
    overflow-y: hidden;
    overflow-x: scroll;
  }
  .CodeMirror-scrollbar-filler {
    right: 0; bottom: 0;
  }
  .CodeMirror-gutter-filler {
    left: 0; bottom: 0;
  }
  
  .CodeMirror-gutters {
    position: absolute; left: 0; top: 0;
    min-height: 100%;
    z-index: 3;
  }
  .CodeMirror-gutter {
    white-space: normal;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: -30px;
  }
  .CodeMirror-gutter-wrapper {
    position: absolute;
    z-index: 4;
    background: none !important;
    border: none !important;
  }
  .CodeMirror-gutter-background {
    position: absolute;
    top: 0; bottom: 0;
    z-index: 4;
  }
  .CodeMirror-gutter-elt {
    position: absolute;
    cursor: default;
    z-index: 4;
  }
  .CodeMirror-gutter-wrapper ::selection { background-color: transparent }
  .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
  
  .CodeMirror-lines {
    cursor: text;
    min-height: 1px; /* prevents collapsing before first draw */
  }
  .CodeMirror pre.CodeMirror-line,
  .CodeMirror pre.CodeMirror-line-like {
    /* Reset some styles that the rest of the page might have set */
    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
    border-width: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    white-space: pre;
    word-wrap: normal;
    line-height: inherit;
    color: inherit;
    z-index: 2;
    position: relative;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-variant-ligatures: contextual;
    font-variant-ligatures: contextual;
  }
  .CodeMirror-wrap pre.CodeMirror-line,
  .CodeMirror-wrap pre.CodeMirror-line-like {
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: normal;
  }
  
  .CodeMirror-linebackground {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    z-index: 0;
  }
  
  .CodeMirror-linewidget {
    position: relative;
    z-index: 2;
    padding: 0.1px; /* Force widget margins to stay inside of the container */
  }
  
  .CodeMirror-widget {
    background-color: rgb(23, 23, 190);
    color: white;
  }
  
  .CodeMirror-rtl pre { direction: rtl; }
  
  .CodeMirror-code {
    outline: none;
  }
  
  /* Force content-box sizing for the elements where we expect it */
  .CodeMirror-scroll,
  .CodeMirror-sizer,
  .CodeMirror-gutter,
  .CodeMirror-gutters,
  .CodeMirror-linenumber {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
  }
  
  .CodeMirror-measure {
    position: absolute;
    width: 100%;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }
  
  .CodeMirror-cursor {
    position: absolute;
    pointer-events: none;
  }
  .CodeMirror-measure pre { position: static; }
  
  div.CodeMirror-cursors {
    visibility: hidden;
    position: relative;
    z-index: 3;
  }
  div.CodeMirror-dragcursors {
    visibility: visible;
  }
  
  .CodeMirror-focused div.CodeMirror-cursors {
    visibility: visible;
  }
  
  .CodeMirror-selected { background: #fdfdfd24; }
  .CodeMirror-focused .CodeMirror-selected { background: #fdfdfd24; }
  .CodeMirror-crosshair { cursor: crosshair; }
  .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
  .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
  
  .cm-searching {
    background-color: #ffa;
    background-color: rgba(255, 255, 0, .4);
  }
  
  /* Used to force a border model for a node */
  .cm-force-border { padding-right: .1px; }
  
  @media print {
    /* Hide the cursor when printing */
    .CodeMirror div.CodeMirror-cursors {
      visibility: hidden;
    }
  }
  
  /* See issue #2901 */
  .cm-tab-wrap-hack:after { content: ''; }
  
  /* Help users use markselection to safely style text background */
  span.CodeMirror-selectedtext { background: none; }

  .CodeMirror-dialog {
    position: absolute;
    left: 0; right: 0;
    background: inherit;
    z-index: 15;
    padding: .1em .8em;
    overflow: hidden;
    color: inherit;
  }
  
  .CodeMirror-dialog-top {
    border-bottom: 1px solid #eee;
    top: 0;
  }
  
  .CodeMirror-dialog-bottom {
    border-top: 1px solid #eee;
    bottom: 0;
  }
  
  .CodeMirror-dialog input {
    border: none;
    outline: none;
    background: transparent;
    width: 20em;
    color: inherit;
    font-family: monospace;
  }
  
  .CodeMirror-dialog button {
    font-size: 70%;
  }

  .CodeMirror-hints {
    position: absolute;
    z-index: 10;
    overflow: hidden;
    list-style: none;
  
    margin: 0;
    padding: 2px;
  
    -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
    -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
    box-shadow: 2px 3px 5px rgba(0,0,0,.2);
    border-radius: 3px;
    border: 1px solid silver;
  
    background: white;
    font-size: 90%;
    font-family: monospace;
  
    max-height: 20em;
    overflow-y: auto;
  }
  
  .CodeMirror-hint {
    margin: 0;
    padding: 0 4px;
    border-radius: 2px;
    white-space: pre;
    color: black;
    cursor: pointer;
  }
  
  li.CodeMirror-hint-active {
    background: #08f;
    color: white;
  }

  .CodeMirror-Tern-completion {
    padding-left: 22px;
    position: relative;
    line-height: 1.5;
  }
  .CodeMirror-Tern-completion:before {
    position: absolute;
    left: 2px;
    bottom: 2px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    height: 15px;
    width: 15px;
    line-height: 16px;
    text-align: center;
    color: white;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .CodeMirror-Tern-completion-unknown:before {
    content: "?";
    background: #4bb;
  }
  .CodeMirror-Tern-completion-object:before {
    content: "O";
    background: #77c;
  }
  .CodeMirror-Tern-completion-fn:before {
    content: "F";
    background: #7c7;
  }
  .CodeMirror-Tern-completion-array:before {
    content: "A";
    background: #c66;
  }
  .CodeMirror-Tern-completion-number:before {
    content: "1";
    background: #999;
  }
  .CodeMirror-Tern-completion-string:before {
    content: "S";
    background: #999;
  }
  .CodeMirror-Tern-completion-bool:before {
    content: "B";
    background: #999;
  }
  
  .CodeMirror-Tern-completion-guess {
    color: #999;
  }
  
  .CodeMirror-Tern-tooltip {
    border: 1px solid silver;
    border-radius: 3px;
    color: #444;
    padding: 2px 5px;
    font-size: 90%;
    font-family: monospace;
    background-color: white;
    white-space: pre-wrap;
  
    max-width: 40em;
    position: absolute;
    z-index: 10;
    -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
    -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
    box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  
    transition: opacity 1s;
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    -ms-transition: opacity 1s;
  }
  
  .CodeMirror-Tern-hint-doc {
    max-width: 25em;
    margin-top: -3px;
  }
  
  .CodeMirror-Tern-fname { color: black; }
  .CodeMirror-Tern-farg { color: #70a; }
  .CodeMirror-Tern-farg-current { text-decoration: underline; }
  .CodeMirror-Tern-type { color: #07c; }
  .CodeMirror-Tern-fhint-guess { opacity: .7; }
  

  .themesLabel {
    padding-left: 20px;
    font-family: monospace;
    font-size: larger;
    font-size: 13.5px;
    font-family: 'Verdana';
    color:var(--f_med);
  }

:root {
  --after-color: white;
  --after-size: 30px;
  --after-rot: rotate(0deg);
  --after-fill: #121111;
  --after-left: calc(50% - 5em);
  --after-top: calc(50% - 5em);
  --after-content: '';
}

#spectatorCounter{

}

#specCount{
  
}

.markdown h1 {
  display:block; 
  color:var(--f_high);
  font-weight:bold;
}

.customlink {
  display: none;
  padding-left:10px;
  color: green !important;
  cursor: pointer;
  text-decoration: underline;
  font-size: 12px;;
}


#customUrl {

  padding-left: 10px;
  width: 175px;
}

/* hide page scrollbar */
html { scrollbar-width: none; } /* Firefox */
body { -ms-overflow-style: none; } /* IE and Edge */
body::-webkit-scrollbar, body::-webkit-scrollbar-button { display: none; } /* Chrome */
/* end hide page scrollbar */

a{
  color: green;
}

.info{
  font-size: 12px;
}

.error{
  font-size: 12px;
  background: #900;
}

.note{
  display:inline;
  position: sticky;
  color: #3f3f3f;
  font-size: 10px;
  left:10px;

}

#logo{
  cursor: pointer;
  font-family: Verdana;
  margin-top: 8px;
}

.version {
  font-size: 12px;
  padding-left: 20px;
  padding-top: 2px;
}

.camera{
  display: none;
  position: absolute;
  left: 90px;
  top:6px;
  z-index: 9;
}

#midiOutputSelect{
  display: none;
  width: 118px;
  color: #eae4e4;
  background-color: #222;
  border: 1px solid #ccc;
  font-size: 12px;
  margin-left: 2px;
}

#restart { margin-right: 20px;} 

#savebtn {
  margin-right: 30px;
}
#loadbtn {
  margin-left: 0px;
}

.markdown h2 { 
  font-size:.9rem;
  margin:0;
}

.markdown ul {
  margin:0
}

.markdown p {
  margin:0;
}

code {
  font-size:1.25em;
  background-color:var(--b_inv);
  color:var(--f_inv);
  padding:0 .25rem;
}

.markdown ul, .markdown ol { 
  padding:0; 
  margin:0; 
  padding-left:2ch
}

.markdown { 
  /*background-color:rgba(0,0,0,.5);*/
  border:3px solid var(--f_low);
  border-radius:3px;
  padding:1em;
}

.CodeMirror-activeline-background {
  background:rgba(255,255,255,.2)
}
.CodeMirror-line {
  padding-left:0 !important
}

.CodeMirror pre {
  /*background-color: rgba( 0,0,0,.75 ) !important;*/

  line-height:1.25em;

  float:left !important;
  clear:left !important;

  font-family:Menlo, monospace !important;
}
@media only screen and (max-width: 950px) {
  #reference { display:none } 
}
@media only screen and (max-width: 615px) {
  #sharebtn, #connect, #restart, #midiOutputSelect, #version { display:none } 
}
@media only screen and (max-width: 400px) {
  #theme { display:none } 
  header { padding-top:.55em }
}
@media only screen and (max-width: 335px) {
  #examples { display:none } 
}

#examples {
  color: rgb(59, 59, 59) !important
}

#theme {
  
  height:1.5em;
  position:relative;
  top:.5em;
  object-fit:cover;
  cursor: pointer;
  padding-right: 15px;
}

html { height: 100% }

body { 
  height:100%; /* needed for calls to calc() in child elements */
  margin: 0;
  color:#ddd;
  font-family: Helvetica Neue, sans-serif;
  background:var(--background);
  box-sizing:border-box !important;
}

::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  border: transparent;
}


#themes ul { 
  list-style:none;
  padding:0; 
  margin:0;
}
#themes {
  display:none; 
}
#themes ul li {
  margin-bottom: -4px
}

.connect {
  margin:.6em; 
  font-family:monospace;
  width:13.8em;
  margin-right:1em;
  right:0;
  display:block
}

#connectmenu, #restartnotification {
  background:var(--b_inv)
}

button, input {
  background:transparent;
  border-width:1px;
  border-style:solid;
  border-color:var(--f_med);
  color:var(--f_med);
  font-family: Helvetica Neue, sans-serif;
  height: 25px;
}

#hidebtn { 
  cursor:pointer;
  border-style:none !important;
  position:absolute;
  right:.5em;
  top:11px;
  color:var(--f_med);
  z-index:1;
}
#hidebtn:focus { outline:0; }

.menu button, .menu input {
  /*border:1px solid #666;*/
  /*color:#ddd;*/
  border-color:var(--f_inv);
  color:var(--f_inv);
}

input { width:6em }

label { 
  font-size:.8em; 
  color:var(--f_inv);
  top:-.5em;
  position:relative;
  left: 4px;
}

#showChat, #useSharedEditorBox { 
  display: 'inline-block';
  width:1em; 
  margin-left:.8em; 
   
}

#graphics, main, .graphics {
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
}

header { 
  position:relative;
  top:0; left:0;
  width:100%; 
  height:2.5em; 
  border-bottom:1px solid var(--f_med);
  padding-left:1em;
  box-sizing:border-box;
  z-index:1;
}

select{ 
  width:18em;
  display:inline-block;
  /*background:rgba(46,50,53,1);*/
  background: white;
  color: var(--f_med);
  -webkit-border-radius:0px;
  -moz-border-radius:0px;
  border-radius:0px;
  border-color: var(--f_med); 
  margin-left:3em;
}

h1 {
  font-size: 1em;
  font-weight: normal;
  display:inline-block;
  margin:0;
  color:var(--f_high);
  padding-left: 10px;
}

#metronome {
  z-index:1;
  position:absolute;
}

#stats {
  width:100%;
  height:1em;
  background:black;
  color:#aaa;
  font-size:.85em;
  position:fixed;
  bottom:0;
  z-index:2
}

header span { font-size: .8em; }

.chatInput {
  
}

#lines {
  display:inline-block; 
  position: absolute;
  width: 20px;
  height: 98%;
  background-color:transparent;
  left: 6px;
  top:3px;
  overflow-y: clip;
}

.line {
  width: 10px;
  color: #6c6c6c;
  height: 10px;
  display: block;
  padding-bottom: 0.566em;
  font-size: inherit;
  padding-left: 5px;
  line-height: inherit;
}

#editor { 
  width:100%; 
  box-sizing:border-box; 
  display:inline-block; 
  position:relative;
  top:0px;
  left:0px;
  height:calc( 100% - 3em);
  /* padding-left:1.5em;   */
  z-index:1;
}

#editor:after {
  margin: 3rem;
  position: absolute;
  content: attr(data-after);
  transform: var(--after-rot);
  -webkit-transform: var(--after-rot);
  color: var(--after-color);
  top: var(--after-top);
  left: var(--after-left);
  z-index: -99;
  font-family: monospace;
  font-size: var(--after-size);
  background-color: var(--after-fill)
  
}

#console{ width:40%; box-sizing:border-box; display:inline-block; position:absolute; height:calc( 100% - 3em ); }

.dg { z-index:100 !important }

#reference {
  position:absolute;
  right:3em;
  top:.15em;
}
#reference a { 
  color: var(--f_med) !important; 
  margin-left: 1em 
}

#reference ul {
  list-style:none
}

#reference li { display:inline }

#reference a img { position:relative; top:.75em }

.CodeMirror-matchingbracket {
  text-decoration:none !important;
  background: rgba(255,255,255,.25)
}

.CodeMirror {
  font-family:Menlo, monospace;
  /* font-size:.8em; */
  background:transparent;
}



span.cm-comment { color:rgb(121,121,121) !important }
#editor, #editor { color:var(--f_low ) }

span.cm-property, 
span.cm-attribute,
span.cm-variable,
span.cm-variable-2,
.cm-def,
.cm-meta,
.cm-s-default { color: var(--f_high) !important }
/*.cm-s-default { color: rgba(173,173,173,1) !important }*/

span.cm-keyword,
span.cm-number, .cm-s-default .cm-atom, .cm-s-default .cm-number { color:var(--f_med) !important }
/*span.cm-number, .cm-s-default .cm-atom, .cm-s-default .cm-number { color:rgba(89, 151, 198, 1) !important }*/
/*span.cm-string, span.cm-string-2 {color: rgb(225, 225, 225) !important }*/
span.cm-string, span.cm-string-2 {color: var(--f_high) !important; font-weight:bold}


.CodeMirror-Tern-fname { color: white !important; font-weight:bold }
.CodeMirror-Tern-farg { color: lightgrey !important }
.CodeMirror-Tern-tooltip {
  position: absolute;
  z-index: 10;
  overflow: hidden;
  list-style: none;

  margin: 0;
  padding: 2px;

  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  border-radius: 3px;
  border: 1px solid silver;

  background: black !important;
  color:white !important;
  font-size: 90%;
  font-family: monospace;

  max-height: 20em;
  overflow-y: auto;
}


.CodeMirror-hints {
  border-radius: 1px;
  white-space: pre;
  color: white;
  background:black;
  cursor: pointer;
}

.CodeMirror-hint {
  color: white
}

li.CodeMirror-hint-active {
  background: #08f;
  color: white;
}

.CodeMirror-cursor {
  background: var(--f_med);
  border: none !important;
  width: .5em !important;
  display: block;
}

.CodeMirror-highlight {
  background:var(--b_low)
}

#main{
  display:inline-block;
  position:relative;
  left:5px;
}

#splitbar {
  display:inline-block;
  top:0;
  position:absolute;
  height:100%;
  width:5px;
  background:#666;
  z-index:1;
  cursor: ew-resize
}
#sidebar {
  display: none;
  position: fixed;
  left: 86%;
  width:35%;
  float:right;
  height:100%;
  border-left:1px black solid;
  box-sizing:border-box;
  overflow:scroll;
  font-family:sans-serif;
  font-weight:lighter;
  font-size:1em
}

img {
  width: 36px;
  height:31px;
}


.annotation { 
  /*padding:0px 1px;*/
  border:1px solid transparent;
  padding:0px;
  box-sizing:border-box !important;
}

.annotation-full {
  border-color: var(--f_high); 
}

.annotation-highlight { background-color: #ffffff }

.annotation-border { 
  /* border-color:#999 !important; */
  border-color:var(--f_low);
  border-width:1px;
  border-style:solid
}

.patternEdit { background-color:var(--b_low) }
.patternEditError{ background-color:#900 }

.annotation-right-border    { border-right-color:var(--f_low) }
.annotation-left-border     { border-left-color:var(--f_low) }
.annotation-top-border      { border-top-color:var(--f_low) } 
.annotation-bottom-border   { border-bottom-color:var(--f_low) }

.annotation-right-border-cycle   { border-right-color:var(--f_high)  !important }
.annotation-left-border-cycle    { border-left-color:var(--f_high)   !important }
.annotation-top-border-cycle     { border-top-color:var(--f_high)    !important } 
.annotation-bottom-border-cycle  { border-bottom-color:var(--f_high) !important }

.annotation-no-left-border  { border-left-color:transparent  !important }
.annotation-no-right-border { border-right-color:transparent !important }

.annotation-border-left {
  border-left-color:var(--f_high);
}

.annotation-border-right {
  border-right-color:var(--f_high);
}

.annotation-no-horizontal-border { 
  /* padding-left:1;  */
  /* padding-right:1; */
}

.annotation-binop-border { 
  /*border-color:transparent;*/
  border-left-color:transparent !important;
  border-right-color:transparent !important;
}

.annotation-array {
  border-top-color:var(--f_high);
  border-bottom-color:var(--f_high);
}

.annotation-binop {
  border-left-color:  transparent !important;
  border-right-color: transparent !important;
  border-style: solid;
}

.scoreCurrentIndex { 
  /*border: #700 1px solid */
  /*font-weight:bold !important*/
  background: rgba(66,70,73,1)
}

.euclid1 {
  /*border-color:#fff !important; */
  border:1px solid var(--f_high) !important;
  padding:0 !important;
  color:var(--f_high) !important;
  /*background-color:var(--b_inv);*/
  /*color:var(--f_inv)*/
}

.euclid0 {
  border:1px solid var(--f_low);
  padding:0 !important;
  /*border-color: var(--f_low);*/
  /*background:rgba(96,100,103,1) */
}

.euclid {
  /*padding:0 2px !important*/
  /*border:transparent 1px solid*/
  padding:1px
}

.pattern-update-range-outside { color:#888; }
.pattern-update-range-inside  { 
  /*color:#0f0 !important; */
  text-decoration:underline;
}

.tidal {
  border-color: var(--f_low) !important;
  padding:0 2px !important
}

.tidal-bright {
  border-color:var(--f_high) !important
}

span.tidalblock {
  /*color:#bbb !important*/
  /*font-weight:bold*/
}

.vtree-leaf-label { 	
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
} 
.vtree {
  font-family:sans-serif;
  font-size:.8em;
}

.rangeInside {
  color:rgba(102, 153, 221, 1) !important;
}

.mapping-start::before {
  content: '\26EF';
  position:absolute;
  left: 0px;
  top:-.5em;
}

.ms-0::before { color:rgb(137, 138, 166) }
.ms-1::before { color:rgb(201, 187, 207) }
.ms-2::before { color:rgb(183, 211, 223) }
.ms-3::before { color:rgb(214, 239, 237) }

.cm-s-default .rangeOutside { color: #666 }

.remote-caret {
  position: relative;
  border-left: 1px solid black;
  border-right: 1px solid black;
  margin-left: -1px;
  margin-right: -1px;
  box-sizing: border-box;
}
.remote-caret > div {
  position: absolute;
  top: -1.05em;
  left: -1px;
  font-size: 1.3em;
  background-color: rgb(250, 129, 0);
  font-family: monospace;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  user-select: none;
  color: white;
  padding-left: 2px;
  padding-right: 2px;
  z-index: 3;
  transition: opacity .3s ease-in-out;
}
.remote-caret.hide-name > div {
  transition-delay: .7s;
  opacity: 0;
}
.remote-caret:hover > div {
  opacity: 1;
  transition-delay: 0s;
}


#console { 
  width:100%;
  overflow:scroll;
  height: calc( 100% - 4.5em );
  color:rgb( 153,153,153 ) !important; 
}
#sidebar {
  color:rgb( 173,173,173 ) !important; 
}

#lomView ul { padding: 0 }

#liveDemosView ul, #maxDemosView ul, #midiDemosView ul { margin:0; padding: 0; list-style:none; cursor:pointer }

#liveDemosView ul li, #maxDemosView ul li, #midiDemosView ul li { margin-bottom: 5px }

#liveDemosView ul li:hover, #maxDemosView ul li:hover, #midiDemosView ul li:hover { background: rgba( 255,255,255, .15) }

#splitbar {
  display:inline-block;
  top:0;
  position:absolute;
  height:100%;
  width:5px;
  background:#666;
  cursor: ew-resize
}

#tabs {
  display:inline-block;
  top:0;
  position:relative;
  left:5px;
  font-size: .8em;
  padding-top:0;
  box-sizing:border
}

#console_list {
  width: 100%;
  height:100%;
  margin:0;
  display: block;
  font-family: 'Menlo', 'Source Code Pro', monospace;
  list-style: none;
  box-sizing:border;
  padding:0;
}

#console_list li {
  font-size: 1em;
}

.console_error {
  color:red;
}

.microlib_tabs_tab {
  padding:1em;
  padding-top:1.5em;
}

.microlib_tabs_nav_item {
  height:26px;
  padding:.5em 5px 0px 5px;
  line-height:26px;
  color:white;
  background:black
}
.microlib_tabs_nav_item.microlib_active {
  background:rgba(89, 151, 198, .6) !important
}

.vtree{ padding-left: 0 }

.demos .microlib_tabs_nav_item, .demos .microlib_tabs_nav_item.microlib_active {
  background:transparent !important;
  color:#ccc;
  text-decoration:underline;
  border:none;
}

.demos .microlib_tabs_nav_item.microlib_active {
  color:rgba(109, 171, 238, 1) !important;
}
.schemas .microlib_tabs_nav_item, .schemas .microlib_tabs_nav_item.microlib_active {
  background:transparent !important;
  color:#ccc;
  text-decoration:underline;
  border:none;
}

.schemas .microlib_tabs_nav_item.microlib_active {
  color:rgba(109, 171, 238, 1) !important;
}
#sidebar select, #sidebar input {
  background:#aaa;
  margin-bottom:10px;
}

label { margin-bottom:5px; }

#help a {
  color: #ddd
}

#help p { max-width: 24em; margin-top:0 }

.demos { padding-left:0 }


.toastify {
  padding: 12px 20px;
  color: #fff;
  display: inline-block;
  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, .12), 0 10px 36px -4px rgba(77, 96, 232, .3);
  background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);
  background: linear-gradient(135deg, #73a5ff, #5477f5);
  position: fixed;
  opacity: 0;
  transition: all .4s cubic-bezier(.215, .61, .355, 1);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  max-width: calc(50% - 20px);
  z-index: 2147483647
}

.toastify.on {
  opacity: 1
}

.toast-close {
  background: 0 0;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 1em;
  opacity: .4;
  padding: 0 5px
}

.toastify-right {
  right: 15px
}

.toastify-left {
  left: 15px
}

.toastify-top {
  top: -150px
}

.toastify-bottom {
  bottom: -150px
}

.toastify-rounded {
  border-radius: 25px
}

.toastify-avatar {
  width: 1.5em;
  height: 1.5em;
  margin: -7px 5px;
  border-radius: 2px
}

.toastify-center {
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  max-width: fit-content;
  max-width: -moz-fit-content
}

@media only screen and (max-width:360px) {

  .toastify-left,
  .toastify-right {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-width: fit-content
  }
}

.CodeMirror-linenumber {
  display: block;
  width: 8px;
  height: 8px;
  font-size: 10px;
}

.CodeMirror-linenumbers{
  position: relative;
  font-size: 10px;
  width: 15px;
  display: flex;
  width: 100%;
  background-color: #222;
  color: white;
  height: 100% !important;
  z-index: -999;
}

.CodeMirror-gutter-wrapper{
  left:-29px !important;
}

.modal {
  position: fixed;
  top: 10%;
  padding: 40px 50px;
  border-radius: 8px;
  background-color: white;
  z-index: 60000;
  width: 400px;
  min-height: 100px;
  display: none;
  left: 50%;
  margin-left: -200px;
  max-height: 80%;
  box-sizing: border-box;
}

.modal-overlay {
  background: #212121;
  opacity: .8;
  position: fixed;
  top: 0px;
  width: 100%;
  height: 1000px;
  z-index: 20000;
  left: 0px;
  vertical-align: middle;
}

#popup {
  position: relative;
  padding: 20px;
  width: 400px;
  height: 140px;
  display: table;
  margin: 0 auto;
  text-align: center;
  font-family: monospace;
  font-size: large;
  top:30%;
  background-color: #000000;
  border-radius: 10px;
  zoom: 110%
}

#popup h1{
  padding-top: 20px;
  font-size: xx-large;
  left: -10px;
  position: relative;
  text-decoration: underline;
}

#subtitle {
  position: relative;
  font-size: 12px;
  font-style: italic;
  top: -7px;
  padding-bottom: 20px;

}

#samplesInput{
  
}
