@import "~codemirror/lib/codemirror.css";
@import "~codemirror/addon/fold/foldgutter.css";
@import "./highlight.css";
@import "~font-awesome/css/font-awesome.css";
@import "../fontcustom/fontcustom.css";

html {
  font-size: 14px;
  box-sizing: border-box;
  font-family: Verdana, sans-serif;
}

body {
  margin: 0;
}

#page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* prevents the page to growing larger than the viewport*/
  max-height: 100vh;
}

#container {
  flex: 1;
  /* for Firefox, otherwise it overflows the parent*/
  min-height: 0;
}

#main {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#contribution {
  font-size: 0.9em;
  color: #555;
  height: 25px;
  text-align: center;
  line-height: 25px;
  background-color: #efefef;
  border-top: 1px solid #ddd;
}

.cover {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hasError {
  filter: blur(3px);
}

.loadingIndicator {
  font-size: 200%;
  color: #555;
}

.dropIndicator {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 3px dashed #888;
  border-radius: 10px;
}

.dropIndicator > div {
  max-width: 90%;
  color: #888;
  font-size: 32px;
}

.banner {
  background-color: #b8dff7;
  border-right: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

#Toolbar {
  flex: 0 0 auto;
  font-family: monospace;
  line-height: 32px;
  border-bottom: 1px solid #ddd;
  color: #454545;
  padding-left: 10px;
  padding-right: 10px;
  z-index: 200;
  display:flex;
  flex-wrap: wrap;
}

#Toolbar > * {
  flex: 0 0 auto;
  border-right: 1px solid #ddd;
}

#Toolbar,
#Toolbar .menuButton ul {
  background-color: #efefef;
}

#Toolbar > *,
#Toolbar > .menuButton > span,
#Toolbar button {
  background-color: transparent;
  box-sizing: border-box;
  color: inherit;
  font-family: inherit;
  font-size: 16px;
  min-width: 90px;
  outline: none;
}

#Toolbar > .menuButton > span {
  cursor: default;
  padding: 0px 6px;
}

#Toolbar > * button {
  height: 100%;
  border: none;
  cursor: pointer;
}

#Toolbar > h1 {
  padding: 0;
  padding-right: 10px;
  margin: 0;
  font-size: 18px;
}

#Toolbar > a {
  color: inherit;
  text-decoration: none;
}

#Toolbar .menuButton:hover > ul {
  display: block;
}

#Toolbar .menuButton ul {
  position: fixed;
  padding: 0;
  margin: 0;
  list-style: none;
  display: none;
  border: 1px solid #ddd;
  max-height: calc(100vh - 65px);
  overflow-y: auto;
  z-index: 500;
}

#Toolbar .menuButton ul li {
  white-space: nowrap;
}

#Toolbar .menuButton ul button {
  line-height: 28px;
  padding-top: 2px;
  padding-bottom: 2px;
  /* for scrollbar */
  padding-right: 15px;
  text-align: left;
  width: 100%;
}

#Toolbar > *.disabled,
#Toolbar button:disabled,
#Toolbar button:disabled:hover,
#Toolbar button:disabled:active {
  background-color: transparent;
  color: #888;
  cursor: default;
}

#Toolbar .menuButton li.selected {
  background-color: rgba(0, 0, 0, 0.05);
}

#Toolbar > a:hover,
#Toolbar > .button:hover,
#Toolbar ul button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

#Toolbar > a:active,
#Toolbar button:active {
  background-color: rgba(0, 0, 0, 0.3);
}

#info {
  color: #898989;
  cursor: default;
  border: none;
  margin-left: auto;
}

#info.small {
  font-size: 12px;
  line-height: 1.3em;
}

.errorMessage {
  font-family: Verdana, non-serif;
  font-size: 1.2em;
}

.errorMessage h3 {
  padding-top: 0;
  margin-top: 0;
  color: #CC0000;
}

.splitpane-content {
  flex: 1;
  /* for Firefox, otherwise it overflows the parent*/
  min-height: 0;
  min-width: 0;
}

.splitpane {
  flex: 1;
  /* for Firefox, otherwise it overflows the parent*/
  min-height: 0;
  min-width: 0;
}

.splitpane-divider {
  background-color: #ddd;
}

.splitpane-divider.horizontal {
  width: 5px;
}

.splitpane-divider.vertical {
  height: 5px;
}

.splitpane-divider:hover {
  background-color: #999;
  cursor: col-resize;
}

.splitpane-divider.vertical:hover {
  cursor: row-resize;
}

.output {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: none;
  padding: 0;
}

.output .toolbar {
  font-size: 14px;
  margin-left: -1px;
  border-bottom: 1px solid #ddd;
}

.output .toolbar > button {
  margin: 0;
  height: 100%;
  min-width: 90px;
  border: 1px solid transparent;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  font-size: 14px;
  background-color: transparent;
  display: inline-block;
  vertical-align: top;
  outline: none;
  cursor: pointer;
}

.output .toolbar > button.active {
  border-color: #999;
  background-color: #999;
  color: #f5f5f5;
}

.output .toolbar .time {
  float: right;
  margin-right: 10px;
  font-size: 10px;
  line-height: 25px;
}

.output > .container {
  overflow: auto;
  flex: 1;
  display: flex;
}

.output > .no-toolbar {
  top: 0;
}

#JSONEditor .CodeMirror {
  font-size: 0.9em;
}

#JSONEditor .CodeMirror,
#JSONEditor .CodeMirror-gutters {
  background-color: #efefef;
}

.editor {
  display: flex;
  flex: 1;
  /* needed to make editor at most as wide as the parent splitpane*/
  min-width: 0;
  min-height: 0;
}

li.entry {
  margin: 0;
  list-style: none;
  padding: 5px;
  position: relative;
}

.CodeMirror .marked,
.entry.highlighted {
  border-radius: 2px;
  background-color: rgba(255,240,6,0.4);
}

.entry > .value {
  white-space: pre-wrap;
}

.entry > .value .s {
  cursor: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.entry.toggable::before {
  content: '+';
  color: green;
  position: absolute;
  left: -10px;
}

.entry.toggable.open::before {
  content: '-';
  color: red;
}

.entry .invokeable {
  cursor: pointer;
}

.entry .invokeable:hover {
  text-decoration: underline;
}

.placeholder {
  font-size: 0.9em;
}

.compact,
.tokenName,
.entry.toggable > .key {
  cursor: pointer;
}

.compact:hover,
.tokenName:hover,
.entry.toggable > .key:hover > .name {
  text-decoration: underline;
}

.CodeMirror {
  height: auto;
  flex: 1;
}

.CodeMirror-scroll {
  overflow: auto;
}

.editor .CodeMirror-gutters {
  background-color: white;
  border: none;
}

.CodeMirror .ErrorGutter {
  width: .7em;
}

.CodeMirror pre.errorMarker {
  background-color: #EB949433;
}

/* Dialog */
.dialog {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.7);
  bottom: 0;
  color: #333;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1000;
}

.dialog .inner {
  max-height: 90vh;
  background-color: white;
  box-shadow: 0px 0px 10px #555;
  border-radius: 3px;
  min-width: 400px;
  display: flex;
  flex-direction: column;
}

.dialog .header {
  flex-shrink: 0;
  padding: 10px 10px 0px 10px;
}

.dialog .body {
  overflow: auto;
  padding: 10px;
}

.dialog .footer {
  flex-shrink: 0;
  padding: 0 10px 10px 10px;
  text-align: right;
}

.dialog .inner h3 {
  margin: 0 0 10px 0;
  padding: 0;
}

#SettingsDialog ul.settings {
  margin: 0;
  padding: 0;
  list-style: none;
}

#SettingsDialog ul.settings li {
  padding: 3px 0;
}


body .CodeMirror-hints,
body .CodeMirror-Tern-tooltip {
  z-index: 1000;
}

.shareInfo dd {
  margin: 0;
  margin-top: 5px;
  margin-bottom: 10px;
}

.shareInfo input {
  font-size: 15px;
  padding: 5px;
  width: calc(100% - 10px);
}

.toggleBtn {
  position: absolute;
  right: 0;
  z-index: 10;
  cursor: pointer;
  outline: none;
}

.toggleBtn > .btnText {
  padding-left: 5px;
  font-size: 12px;
}

.settings-drawer__expanded {
  width: 200px;
  border-right: 1px solid #ddd;
}

.settings-drawer__collapsed {
  width: 20px;
  background-color: #ddd;
}
