* {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  margin: 0;
  padding: 0;
}

:root {
  --tabbar-height: 38px;
  --search-results-height: 0px;
}

html,
body {
  height: 100%;
  background: #F7F7F7;
  color: #111;
}

body {
  font-family: "Segoe UI", "Roboto", "Helvetica Neue", "San Francisco", "Droid Sans", "Liberation Sans", sans-serif;
  max-width: 100%;
}

a[target] {
  color: #111;
}

:focus {
  outline: #049699 auto 5px;
}

.central {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.project {
  width: 200px;
  position: absolute;
  top: 0px;
  left: 0;
  bottom: 0;
}

.editing {
  min-width: 0px;
  margin-left: 200px;
  height: 100%;
  background-color: #1e1e1e; /* same as monaco's */
  overflow: hidden;
  position: relative;
}

.wide .project,
.wide .project-resizer {
  display: none
}

.wide .editing {
  margin-left: 0px !important;
}

#editor {
  z-index: 9;
  height: calc(100% - (var(--tabbar-height) + var(--search-results-height)));
}

.cover {
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: 0;
  padding: 0;

  background-color: rgba(0,0,0,0.4);

  /* -webkit-transition: opacity 0.2s ease-in 0s; */
  /* transition: opacity 0.2s ease-in 0s; */

  z-index: 1000;
  opacity: 0;
  visibility: hidden;
}

.cover.visible {
  opacity: 1;
  visibility: visible;
}

/* titlebar
--------------------------------------------------*/

.titlebar {
  z-index: 999;
  position: relative;
  -webkit-app-region: drag;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.titlebar .window-controls {
  -webkit-app-region: no-drag;
}

.titlebar .app-name {
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #111;
  position: absolute;
  top: 10px;
  display: none;
}

.titlebar .window-controls {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #aaa;
}

.window-controls a {
  width: 36px;
  height: var(--tabbar-height);
  line-height: 40px;
  padding: 0;
  display: inline-block;
  font-family: monospace;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #4d4d4d;
  transition: opacity .3s ease;
  opacity: .6;
  color: #111;
  float: right;
  background-color: #bbb;
}

.window-controls .minimize-icon {
  line-height: 44px;
}

.window-controls .minimize-icon:hover {
  color: #fff;
}

.window-controls .maximize-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14.478429" height="11.774817" viewBox="0 0 3.8307509 3.1154206" version="1.1"><g transform="translate(-218.82272,-201.70419)"><rect style="opacity:1;fill:none;fill-opacity:1;stroke:black;stroke-width:0.5;stroke-opacity:0.9" width="3.3307509" height="2.6154206" x="219.07272" y="201.95419" /><path style="fill:none;stroke:black;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.9" d="m 219.05341,202.40664 h 3.35491" /></g></svg>');
  background-repeat: no-repeat;
  background-position: center 51%;
  background-size: 34%;
}

.window-controls .maximize-icon:hover {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14.478429" height="11.774817" viewBox="0 0 3.8307509 3.1154206" version="1.1"><g transform="translate(-218.82272,-201.70419)"><rect style="opacity:1;fill:none;fill-opacity:1;stroke:white;stroke-width:0.5;stroke-opacity:1" width="3.3307509" height="2.6154206" x="219.07272" y="201.95419" /><path style="fill:none;stroke:white;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 219.05341,202.40664 h 3.35491" /></g></svg>');
}

.window-controls a:hover {
  opacity: 1;
  color: #000;
  background-color: #ccc;
  cursor: pointer;
}

.window-controls a.close-icon {
  background: #e9c434;
  color: #111;
  text-indent: -9999em;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23111111" d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/></svg>');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 30%;
}

.window-controls a.close-icon:hover {
  /*background-color: #c5a62b;*/
  /*color: #fff;*/
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="white" d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/></svg>');
}

/*
.window-controls a.three-dots {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><path fill="111111" d="M315.1,452.9c0,32.6-26.5,59.1-59.1,59.1s-59.1-26.5-59.1-59.1s26.5-59.1,59.1-59.1S315.1,420.3,315.1,452.9z M315.1,256c0,32.6-26.5,59.1-59.1,59.1s-59.1-26.5-59.1-59.1s26.5-59.1,59.1-59.1S315.1,223.4,315.1,256z M315.1,59.1 c0,32.6-26.5,59.1-59.1,59.1s-59.1-26.5-59.1-59.1S223.4,0,256,0S315.1,26.5,315.1,59.1z"/></svg>');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40%;
  background-color: transparent;
}

.window-controls a.three-dots:hover {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><path fill="white" d="M315.1,452.9c0,32.6-26.5,59.1-59.1,59.1s-59.1-26.5-59.1-59.1s26.5-59.1,59.1-59.1S315.1,420.3,315.1,452.9z M315.1,256c0,32.6-26.5,59.1-59.1,59.1s-59.1-26.5-59.1-59.1s26.5-59.1,59.1-59.1S315.1,223.4,315.1,256z M315.1,59.1 c0,32.6-26.5,59.1-59.1,59.1s-59.1-26.5-59.1-59.1S223.4,0,256,0S315.1,26.5,315.1,59.1z"/></svg>');
  background-color: #ccc;
  background: #000;
}
*/

/* tabs
--------------------------------------------------*/

.tabs {
  -webkit-app-region: drag;
  height: var(--tabbar-height);
  background: #aaa;
  padding: 0 2px 0 0;
  display: flex;
  justify-content: flex-start;
}

.tab {
  -webkit-app-region: no-drag;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 200px;
  min-width: 0px;
  opacity: .5;
  background: #F7F7F7;
  border-bottom: 3px solid #ccc;
  color: #111;
  padding: 0 10px 0 0;
  margin-left: 2px;
  flex: 1 1 0px;
  position: relative;
  border-radius: 2px 2px 0 0;
  /* transition: max-width 0.5s linear, -webkit-transform 0.2s ease, border-width 0.2s ease, opacity 0.2s ease; */
  transition: max-width 0.5s linear, transform 0.2s ease, border-width 0.2s ease, opacity 0.2s ease;
}

.tab.active {
  border-color: #e9c434;
  color: #111;
  opacity: 1;
  z-index: 9;
  font-weight: bold;
  min-width: 170px;
}

.tab:hover:not(.active) {
  opacity: .8;
}

.tab.dragging {
  width: 0;
  padding: 0;
  flex-grow: 0;
}

.tab.hovering {
  border-left-color: #AAA;
  border-left-width: 25px;
  border-left-style: solid;
}

.tab.enter {
  -webkit-transform: translateY(-24px);
  transform: translateY(-24px);
}

.tab label {
  text-decoration: none;
  color: #111;
  font-size: 12px;
  padding: 11px 0 11px 28px;
  width: 100%;
  /*flex: 1;*/
  cursor: default;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tab label:focus {
  outline: none;
  border: none;
}

.tab .close {
  cursor: pointer;
  width: 11px;
  height: 11px;
  font-weight: bold;
  position: absolute;
  left: 10px;

  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="dimgray" d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/></svg>');
  background-repeat: no-repeat;
  background-position: left 60%;
  background-size: 90%;
  text-indent: -9999em;
}

.tab.active .close {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="rgb(30,30,30)" d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/></svg>');
  background-size: 90%;
}

.tab.modified .close {
  /* width: 12px; */
  /* margin-right: 7px; */
  /*background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 16.094l-4.157-4.104 4.1-4.141-1.849-1.849-4.105 4.159-4.156-4.102-1.833 1.834 4.161 4.12-4.104 4.157 1.834 1.832 4.118-4.159 4.143 4.102 1.848-1.849z"/></svg>');*/
  /*background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#aaaaaa" d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12z"/></svg>');*/
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle fill="rgb(153,153,153)" cx="12" cy="12" r="12"/></svg>');
  background-size: 87%;
  /* background-position: left 60%; */
}

.tab.active.modified .close {
  /*background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#111111" d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12z"/></svg>');*/
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle fill="rgb(68,68,68)" cx="12" cy="12" r="12"/></svg>');
}

.tab .close:hover {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="red" d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/></svg>');

/*
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="red" d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.151 17.943l-4.143-4.102-4.117 4.159-1.833-1.833 4.104-4.157-4.162-4.119 1.833-1.833 4.155 4.102 4.106-4.16 1.849 1.849-4.1 4.141 4.157 4.104-1.849 1.849z"/></svg>');
  width: 40px;
  margin: 0 3px 0 -4px;
  background-position: 0% 80%;
*/
}

.tab.modified .close:hover {
  /*background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="red" d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12z"/></svg>');*/
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle fill="red" cx="12" cy="12" r="12"/></svg>');
}

.tabs .config {
  margin-left: 10px;
  /* position: absolute; */
  display: none;
  color: #a2a2c1;
  border: 1px solid #a2a2c1;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 400;
}

.active .config {
  display: inherit;
}

.tab:hover .config,
.tab:hover .lang {
  border-color: #6600ff;
  color: #6600ff;
  cursor: pointer;
}

.tab .lang:hover,
.tab .tabulation:hover {
  background-color: #6600ff;
  color: white;
}

.tab .lang {
  border-right: 1px solid #a2a2c1;
  padding: 0 2px;
}

.tab:hover .lang {
  border-right: 1px solid #6600ff;
}

.tab-config-lang li:first-child {
  color: #999;
}

.tabsize-2 .set-tab-2,
.tabsize-4 .set-tab-4,
.tabsize-6 .set-tab-6,
.tabsize-8 .set-tab-8 {
  color: #999;
}

.tab .config .tabulation {
  padding: 0 2px 0 18px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="3.4058747mm" height="1.9706818mm" viewBox="0 0 3.4058747 1.9706818" version="1.1"><g transform="translate(-337.71968,-140.28847)"><path style="fill:rgb(162,162,193);fill-opacity:1;stroke-width:0.00325883" d="m 340.80235,141.27381 v -0.98534 h 0.1616 0.16161 v 0.98534 0.98534 h -0.16161 -0.1616 z m -1.25028,0.86832 -0.11206,-0.1135 0.29019,-0.29382 c 0.1596,-0.16161 0.29019,-0.29501 0.29019,-0.29648 0,-0.002 -0.51766,-0.002 -1.15035,-0.002 h -1.15036 v -0.16188 -0.16188 h 1.15036 c 0.63269,0 1.15035,-0.002 1.15035,-0.002 0,-0.002 -0.13059,-0.13487 -0.2902,-0.2965 l -0.2902,-0.29386 0.11296,-0.11435 0.11297,-0.11434 0.48567,0.49178 0.48567,0.49178 -0.48481,0.49091 c -0.26664,0.27 -0.4856,0.49092 -0.48657,0.49092 -0.001,0 -0.0522,-0.0511 -0.11381,-0.11351 z" /></g></svg>');
  background-position: 2px center;
  /*background-size: 10px;*/
  background-repeat: no-repeat;
}

.tab:hover .tabulation {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="3.4058747mm" height="1.9706818mm" viewBox="0 0 3.4058747 1.9706818" version="1.1"><g transform="translate(-337.71968,-140.28847)"><path style="fill:rgb(102,0,255);fill-opacity:1;stroke-width:0.00325883" d="m 340.80235,141.27381 v -0.98534 h 0.1616 0.16161 v 0.98534 0.98534 h -0.16161 -0.1616 z m -1.25028,0.86832 -0.11206,-0.1135 0.29019,-0.29382 c 0.1596,-0.16161 0.29019,-0.29501 0.29019,-0.29648 0,-0.002 -0.51766,-0.002 -1.15035,-0.002 h -1.15036 v -0.16188 -0.16188 h 1.15036 c 0.63269,0 1.15035,-0.002 1.15035,-0.002 0,-0.002 -0.13059,-0.13487 -0.2902,-0.2965 l -0.2902,-0.29386 0.11296,-0.11435 0.11297,-0.11434 0.48567,0.49178 0.48567,0.49178 -0.48481,0.49091 c -0.26664,0.27 -0.4856,0.49092 -0.48657,0.49092 -0.001,0 -0.0522,-0.0511 -0.11381,-0.11351 z" /></g></svg>');
}

.tab .tabulation:hover {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="3.4058747mm" height="1.9706818mm" viewBox="0 0 3.4058747 1.9706818" version="1.1"><g transform="translate(-337.71968,-140.28847)"><path style="fill:white;fill-opacity:1;stroke-width:0.00325883" d="m 340.80235,141.27381 v -0.98534 h 0.1616 0.16161 v 0.98534 0.98534 h -0.16161 -0.1616 z m -1.25028,0.86832 -0.11206,-0.1135 0.29019,-0.29382 c 0.1596,-0.16161 0.29019,-0.29501 0.29019,-0.29648 0,-0.002 -0.51766,-0.002 -1.15035,-0.002 h -1.15036 v -0.16188 -0.16188 h 1.15036 c 0.63269,0 1.15035,-0.002 1.15035,-0.002 0,-0.002 -0.13059,-0.13487 -0.2902,-0.2965 l -0.2902,-0.29386 0.11296,-0.11435 0.11297,-0.11434 0.48567,0.49178 0.48567,0.49178 -0.48481,0.49091 c -0.26664,0.27 -0.4856,0.49092 -0.48657,0.49092 -0.001,0 -0.0522,-0.0511 -0.11381,-0.11351 z" /></g></svg>');
}

.tab .tabulation.spaces-true {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="68" height="24" viewBox="0 0 68 24"><circle fill="rgb(162,162,193)" cx="12" cy="12" r="12"/><circle fill="rgb(162,162,193)" cx="56" cy="12" r="12"/></svg>');
  background-size: 40%;
  background-position: 4px center;
}

.tab:hover .tabulation.spaces-true {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="68" height="24" viewBox="0 0 68 24"><circle fill="rgb(102,0,255)" cx="12" cy="12" r="12"/><circle fill="rgb(102,0,255)" cx="56" cy="12" r="12"/></svg>');
}

.tab .tabulation.spaces-true:hover {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="68" height="24" viewBox="0 0 68 24"><circle fill="white" cx="12" cy="12" r="12"/><circle fill="white" cx="56" cy="12" r="12"/></svg>');
}


/* new tab & dropdown
--------------------------------------------------*/

.tabs .newtab {
  -webkit-app-region: no-drag;
  min-width: 30px;
  max-width: 30px;
  border-radius: 2px 2px 0 0;
  padding-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  z-index: 100;
  margin: 0 1px 0 3px;

}

.newtab.active {
  border-color: #333 !important;
  /*opacity: .8;*/
  /*min-width: auto;*/
}

.newtab .big-label {
  font-size: 22px;
  color: #aaa;
  /*font-weight: bold;*/
  font-weight: normal;
  text-align: center;
  padding: 5px 10px;
  cursor: pointer;
  /*background-image: url('data:image/svg+xml;utf8,<svg width="22.553mm" height="22.344mm" version="1.1" viewBox="0 0 22.55265 22.343849" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><g transform="translate(-242.72 -198.89)"><path transform="matrix(.26458 0 0 .26458 242.72 198.89)" d="m70.615 0.025391v10.432a42.619 42.224 0 0 1 14.566 30.646v-41.078h-14.566zm14.566 43.775a42.619 42.224 0 0 1 -14.566 30.219v10.258h14.566v-40.477z"/><path d="m254 198.89a11.276 11.172 0 0 0 -11.276 11.172 11.276 11.172 0 0 0 11.276 11.172 11.276 11.172 0 0 0 7.4073 -2.7595v-16.818a11.276 11.172 0 0 0 -7.4073 -2.7668zm7.4073 2.7668a11.276 11.172 0 0 1 3.854 8.1085 11.276 11.172 0 0 0 -3.854 -8.1085zm3.854 8.1085v0.71314a11.276 11.172 0 0 0 0.015 -0.41652 11.276 11.172 0 0 0 -0.015 -0.29662zm-3.854 8.709a11.276 11.172 0 0 0 2.7234 -3.5254 11.276 11.172 0 0 1 -2.7234 3.5254zm2.7234-3.5254a11.276 11.172 0 0 0 0.44235 -1.0268 11.276 11.172 0 0 1 -0.44235 1.0268zm0.44235-1.0268a11.276 11.172 0 0 0 0.33589 -1.0645 11.276 11.172 0 0 1 -0.33589 1.0645zm-10.573-11.194a7.4019 7.3333 0 0 1 7.4021 7.3334 7.4019 7.3333 0 0 1 -7.4021 7.3334 7.4019 7.3333 0 0 1 -7.4021 -7.3334 7.4019 7.3333 0 0 1 7.4021 -7.3334zm11.261 7.752a11.276 11.172 0 0 1 -0.11834 1.2258 11.276 11.172 0 0 0 0.11834 -1.2258zm-0.12661 1.294a11.276 11.172 0 0 1 -0.22428 1.078 11.276 11.172 0 0 0 0.22428 -1.078z" fill="#1a1a1a"/></g></svg>');*/
  background-image: url('data:image/svg+xml;utf8,<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="34.604828mm" height="41.02927mm" viewBox="0 0 34.604828 41.02927"><g transform="translate(30.153605,-128.3187)"><path d="M 96.988281 0.13476562 L 0 155.07031 L 32.378906 155.07031 L 53.880859 120.80859 L 104.77539 154.93359 L 114.83594 127.84375 L 68.453125 97.589844 L 129.61328 0.13476562 L 96.988281 0.13476562 z " transform="matrix(0.26458333,0,0,0.26458333,-30.153605,128.3187)" /><path fill="%238b68ef" d="m -2.7676355,128.3187 h 7.21886 v 41.01366 h -7.21886 z" /></g></svg>');
  background-size: 15px;
  background-position: 4px center;
  background-repeat: no-repeat;
}

.newtab .big-label:hover {
  color: #8269ff;
}

/*
.newtab span.plus {
  display: none;
}

.newtab:hover span.plus {
  position: absolute;
  top: 8px;
  left: 11px;
  color: #000;
  font-size: 14px;
  font-weight: 500;
}
*/

.open-dropdown {
  position: absolute;
  top: 37px;
  background: #eee;
  border-radius: 0 0 3px 3px;
  overflow: visible;
}

.tab-config-lang {
  max-height: 400px;
  overflow: auto;
}

.newtab .open-dropdown {
  left: 0px;
  width: 160px;
  opacity: 1;
  display: none;
}

.newtab .secondary span {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="9px" height="9px" viewBox="0 0 306 306" style="enable-background:new 0 0 306 306;" xml:space="preserve"><polygon points="94.35,0 58.65,35.7 175.95,153 58.65,270.3 94.35,306 247.35,153"></polygon></svg>');
  background-repeat: no-repeat;
  background-position: 95% center;
}

.newtab .secondary .open-dropdown {
  left: 160px;
  top: auto;
  margin-top: -37px;
  border-left: 1px solid #666;
  /*transform: translateX(1px);  */
}

.newtab .secondary:hover .open-dropdown {
  display: block;
}

.config .open-dropdown {
  right: 0;
  text-align: right;
}

.tab-config-lang.open-dropdown {
  min-width: 100px;
}

.open-dropdown li {
  font-weight: bold;
  color: #111;
  text-transform: none;
  font-size: 12px;
  list-style: none;
}

.open-dropdown li.separator {
  height: 2px;
  /* background: #666; */
  border-top: 1px solid #444;
  width: 100%;
  display: none;
}

.open-dropdown li:hover {
  background-color: #fff;
  cursor: pointer;
}

.open-dropdown li:last-child {
  border-radius: 0 0 3px 3px;
}

.open-dropdown a,
.open-dropdown span {
  padding: 10px 10px;
  display: block;
}

.open-dropdown li small {
  color: #999;
  margin-left: 3px;
  font-size: 10px;
}

/* search results
--------------------------------------------------*/

#search-results {
  background: #666272;
  font-size: 12px;
  padding-top: 34px;
  position: relative;
}

#search-results .header {
  padding: 9px 10px 9px 31px;
  background: #38363c;
  color: #fff;
  position: absolute;
  top: 0;
  width: 100%;
}

#search-results #search-query {
  font-family: monospace;
  background: rgba(255,255,255,0.2);
  padding: 2px 3px;
  border-radius: 3px;
  margin: 0 3px;
}

#search-results .close {
  font-size: 20px;
  text-decoration: none;
  color: #848484;
  position: absolute;
  margin-top: -6px;
  left: 11px;
}

#search-results ul {
  /*max-height: 180px;*/
  max-height: 35vh;
  overflow-x: hidden;
}

#search-results li {
  list-style: none;
}

#search-results label {
  color: rgba(255, 255, 255, 0.9);
}

#search-results .line-number label {
  color: #ddcb83;
}

#search-results label:hover {
  color: #fff;
  cursor: pointer;
}

#search-results label:hover .pathname {
  text-decoration: underline;
}

#search-results .toggle-next {
  padding: 7px 10px 9px;
  display: block;
}

#search-results .level-2:hover {
  background-color: rgba(0,0,0,0.3);
}

#search-results li ul {
  display: none;
  background: rgba(0, 0, 0, 0.1);
}

#search-results li ul.visible {
  display: block;
}

#search-results li li {
  font-family: monospace;
  line-height: 1.5;
}

#search-results .level-1 {
  border-bottom: 1px solid #524e5b;
}

#search-results .level-2 {
  padding: 8px 10px;
  border-top: 1px solid #666272;
}

#search-results .level-2.match-1 {
  border-top: 0;
}

#search-results .dirname {
  background: rgba(255,255,255,0.2);
  padding: 1px 3px;
  border-radius: 3px;
  margin-right: 3px;
}

#search-results .line-number {
  min-width: 32px;
  text-align: right;
  display: inline-block;
/*
  background: rgba(0,0,0,0.2);
  padding: 1px 2px;
  border-radius: 2px;
*/
  margin-right: 15px;
}


#search-results .highlight {
  background-color: #e9c434;
  color: black;
}


/* palette/prompt
--------------------------------------------------*/

.palette,
.prompt {
  display: none;
  width: 320px;
  position: fixed;
  top: 20px;
  left: calc(50% - 150px);
  background: transparent;
  color: #000000;
  z-index: 1001;
  font-size: 16px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  transition-property: opacity, transform;
  transition-duration: .1s, .2s;
  transition-timing-function: linear, ease-in-out;
  transform: perspective(1000px) translateY(0px) rotateX(0deg) translateZ(0);
  opacity: 1;
}

.palette.enter,
.prompt.enter {
  opacity: .2;
  transition-duration: 0s, 0s;
  transform: perspective(1000px) translateY(10px) rotateX(-45deg) translateZ(-20px);
}

.palette.active,
.prompt.active {
  display: block;
}

.palette .main,
.prompt .main {
  background: #ffffff;
  padding: 8px 12px;
}

.prompt h1 {
  font-size: 16px;
  padding: 10px 0;
  text-align: center;
  font-weight: normal;
}

.palette input,
.prompt input {
  width: 100%;
  display: block;
  border: none;
  border-bottom: 2px solid #999;
  padding: 8px;
  margin-bottom: 12px;
  background: transparent;
  color: #111;
  font-weight: bold;
  font-size: 18px;
}

.palette input:focus,
.prompt input:focus {
  outline: none;
  border-bottom: 2px solid #4e3388;
}

.palette button,
.prompt button {
  background: none;
  border: 1px solid #ccc;
  padding: 10px 19px;
  color: #222;
  font-weight: bold;
  width: 48%;
}

.palette button.prompt-cancel,
.prompt button.prompt-cancel {
  margin-right: 2%;
}

.palette button:hover,
.prompt button:hover {
  cursor: pointer;
  border-color: #666;
  background-color: rgba(0, 0, 0, 0.1);
}

.palette .results,
.prompt .results {
  background: rgba(255, 255, 255, 0.9);
  list-style-type: none;
  z-index: 999;
  border-top: 1px solid #AAA;
  overflow-x: hidden;
}

.palette .results li,
.prompt .results li {
  border-left: 2px solid #AAA;
  display: block;
  padding: 8px;
}

.palette .results li.current,
.prompt .results li.current {
  border-left: 2px solid #4e3388;
  font-weight: bold;
  background: #ffffff;
}

.palette .results li .label,
.prompt .results li .label {
  font-size: 18px;
}

.palette .results li .sublabel,
.prompt .results li .sublabel {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  max-height: 1.5em;
  margin-top: 4px;
}

/* project
--------------------------------------------------*/

.project {
  padding: 0 8px;
  overflow-y: auto;
  overflow-x: auto;
  background: #e1e1e1;
  color: #292929;
  /* transition: width 0.3s ease-in-out, border-width 0.3s ease-in-out, padding 0.3s linear; */
  /* -webkit-app-region: drag; */
}

.project ul {
  list-style-type: none;
  -webkit-app-region: no-drag;
}

.project li {
  color: #292929;
  /* white-space: nowrap; */
  padding: 4px 0 3px;
  font-size: 12px;
}

.project li > ul {
  display: none;
  padding-left: 12px;
  padding-top: 3px;
}

.project li.expanded > ul {
  display: block;
}

.project a {
  padding: 0 4px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  border-radius: 2px;
}

.project a:hover {
  text-decoration: underline;
  color: #111;
}

.project a:active {
  background: rgba(41, 41, 41, 0.15);
}

.project a:focus {
  outline: none;
}

.project .root {
  padding-top: 3px;
  position: relative;
}

.project .root:not(:first-child) {
  margin-top: 10px;
}

/*
.project .root > .directory {
  font-weight: bold;
}

.project .root > .directory:before {
  content: none;
}
*/

.project .root .label {
  background-color: rgba(51, 214, 214, 0.4);
  font-weight: bold;
  display: block;
  height: 38px;
  font-size: 12px;
  line-height: 38px;
  padding: 0 10px 0 24px;
  margin: -3px -8px 0 -8px;
  color: #0e2326;
  overflow: hidden;
}

.project .root .label:hover {
  text-decoration: underline;
  cursor: pointer;
}

.project .root img.transparent {
  width: 170px;
  height: 28px;
  position: absolute;
  left: 0px;
  top: 5px;
}

.project .directory {
  position: relative;
  font-weight: bold;
}

.project .file {
  position: relative;
}

.project .file:before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="12px" width="12px" viewBox="0 0 100 100" x="0px" y="0px"><path fill="black" d="M83.5,29.2,58.7,6H16.5V94h67ZM60.5,15.9,72.9,27.5H60.5ZM22.5,88V12h32V33.5H77.5V88Z"></path></svg>');
  position: absolute;
  left: -11px;
  top: 1px;
}

.project .root:before,
.project .directory:before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="9px" height="9px" viewBox="0 0 306 306" style="enable-background:new 0 0 306 306;" xml:space="preserve"><polygon points="94.35,0 58.65,35.7 175.95,153 58.65,270.3 94.35,306 247.35,153"></polygon></svg>');
  position: absolute;
  left: -10px;
  opacity: .5;
  transition: all .3s;
  top: 1px;
}

.project .root:before {
  top: 13px;
  left: 2px;
}

.project .directory:hover:before {
  opacity: 1;
}

.project .root.expanded:before,
.project .expanded > .directory:before {
  -webkit-transform: rotate(90deg) translateX(-1px);
  transform: rotate(90deg) translateX(-1px);
  left: -11px;
  top: 2px;
}

.project .root.expanded:before {
  left: 1px;
  top: 14px;
}

.project-resizer {
  position: absolute;
  height: 100%;
  left: 195px; /* 200 - 5px) */
  top: 0;
  width: 10px;
  cursor: col-resize;
  z-index: 10;
}

.project-resizer.resizing {
  background-color: rgba(255, 0, 0, 0.5);
}

.project-resizer:hover {
  background-color: rgba(255, 0, 0, 0.3);
}

.project .load-ui {
  display: none;
  position: absolute;
  width: 100%;
  background: #c4c4c4;
  color: #111;
  font-weight: bold;
  text-align: center;
  top: 0;
  left: 0;
  padding-top: 8px;
  z-index: 9;
}

.project .load-ui .progress {
  background: #4e3388;
  height: 2px;
  margin-top: 6px;
  -webkit-animation: progress 2s infinite ease-in-out;
}

.project.loading .load-ui {
  display: block;
}

@-webkit-keyframes progress {
  0% {
    width: 1%;
  }

  100% {
    width: 100%;
  }
}

/* scrollbar
--------------------------------------------------*/

::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}

::-webkit-scrollbar-button {
  height: 0px;
  width: 0px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #b2b2b2;
  border: 3px solid transparent;
  border-radius: 6px;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a7a7a7;
}

::-webkit-scrollbar-corner {
  background-color: #d5d5d5;
}