* {
  box-sizing:border-box;
}
body {
  background:#fafafa;
  background-image:url('img/bg-gray.png') repeat scroll center top transparent;
  color:#5b5b5b;
  font-family:'open sans';
  margin:0;
  padding:0;
}
h1 {
  font-size:35px;
  font-weight:300;
  text-align:center;
  border-bottom:1px solid #aaa;
  padding:0 0 20px 0;
  margin:30px 0;
  line-height:40px;
}
ul {
  list-style-type:none;
  padding:0;
}
h2 {
  font-family:'open sans';
  font-size:36px;
  font-weight:300;
  color:#173847;
}
#wrapper {
  padding:0 20px;
}
#command_wrapper {
  display:table;
  width:100%;
  padding:0;
  margin:0;
  border-spacing:0;
}
#command_wrapper > * {
  vertical-align:top;
  display:table-cell;
}
#command_list {
  display:table-cell;
  list-style-type:none;
  padding:36px 0 0 0;
  margin:0;
  height:100%;
}
#command_list li {
  padding:4px 12px;
  display:block;
  width:200px;
  cursor:pointer;
  border-radius:28px;
  box-sizing:border-box;
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  color:#0088CC;
}
#command_list li:hover {
  color:#444;
}
#command_list li.selected {
  color:#444;
  background:#f0f0f0;
}
#command_table {
  height:100%;
}
#io_wrapper {
  float:right;
  display:table;
  height:500px;
  padding:0;
  table-layout:fixed;
  border-spacing:24px 0;
  width:96%;
  height: 100%;
}
#io_wrapper > div {
  display:table-row;
  width:100%;
  margin:0;
  padding:0;
}
#response {
  min-height:100px;
  border-top-left-radius:0px !important;
  border-top-right-radius:0px !important;
}
#input {
  width: 30%;
}
#output {
  width: 60%;
}
p, h3 {
  margin:16px 0;
  font-family:'open sans';
  font-weight:300;
  font-size:24.5px;
}
#status {
  height:120px;
  overflow:auto;
  margin-bottom:10px;
  border-radius:4px;
  border:1px dotted #aaa;
  background:#f5f5f5;
  resize:vertical;
  display:none;
}
#status * {
  resize: none;
}
#status div.result {
  border-bottom:1px dotted #aaa;
  padding:5px 0;
}
#status div.result p {
  font-size:14px;
}
#status div.result div.key {
  padding:2px 2px 2px 6px;
}
#info span.command_name {
  display:inline-block;
}
#info span.timestamp, #info span.sizestamp {
  display:inline-block;
  margin:0 5px;
  color:#aaa;
}
#response.success {
  border-top:4px solid #B5CAA0;
}
#response.error {
  border-top: 4px solid #E83015;
}
#response div.result {
  border-bottom:1px dotted #aaa;
  overflow:auto;
}
#response:focus, #status:focus {
  outline:none;
}

#request_options > div {
  float:right;
  margin:0;
  width:200px;
  color:#fff;
 /* 
 background-image:linear-gradient(283deg, rgba(255,255,255,0.1) 50%, transparent 55%), linear-gradient(top, rgba(255,255,255,0.15), transparent);
  background-image:-webkit-linear-gradient(283deg, rgba(255,255,255,0.1) 50%, transparent 55%), -webkit-linear-gradient(top, rgba(255,255,255,0.15), transparent);
  background-image:-moz-linear-gradient(283deg, rgba(255,255,255,0.1) 50%, transparent 55%), -moz-linear-gradient(top, rgba(255,255,255,0.15), transparent);
  background-image:linear-gradient(283deg, rgba(255,255,255,0.1) 50%, transparent 55%), linear-gradient(top, rgba(255,255,255,0.15), transparent);
  background-image:-webkit-linear-gradient(283deg, rgba(255,255,255,0.1) 50%, transparent 55%), -webkit-linear-gradient(top, rgba(255,255,255,0.15), transparent);
  background-image:-moz-linear-gradient(283deg, rgba(255,255,255,0.1) 50%, transparent 55%), -moz-linear-gradient(top, rgba(255,255,255,0.15), transparent);
 */

  border-radius:4px;
  border-bottom:1px solid #fff;
  background-color: #346AA9;
  font-weight:300;
  font-size:16px;
/*   line-height:50px; */
  text-align:center;
  cursor:default;

  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
}
#request_button {
  background:#3a87ad;
}
#request_button.depressed {
  background:#295F7A;
}
#sign_button {
  display:none;
  background:#42602D;
  margin-right:22px !important;
}
#sign_button.depressed {
  background:#304621;
}

.obscured {
  opacity:.7;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  cursor:default;
}
::-webkit-scrollbar-thumb {
  background:#aaa;
  border-radius: 4px;
  cursor:pointer;
}
#online_state {
  position:absolute;
  top:100px;
/*   right:20px; */
  line-height:50px;
  font-size:14px;
  font-style:italic;
}
#online_state.disconnected {
  color:#E83015;
}
#online_state.connecting { }
#online_state.connected {
  color: #4A593D;
}
#invalid {
  display:none;
  color:#E83015;
  font-family:'open sans';
  font-size:14px;
}

#pause_button {
  display:inline-block;
  position:relative;
  right:-12px;
  top:3px;
  background:#aaa;
  color:#fff;
  font-size:10px;
  cursor:pointer;
  font-weight:bold;
  letter-spacing:-5px;
  text-align:center;
  width:28px;
  padding-right:6px;
  padding-bottom:2px;
  border-radius:4px;
  vertical-align:top;
  display:none;
}

ul.toolbar {
  background:#f5f5f5;
  font-size:.8em;
  border-radius:4px;
}
ul.toolbar li {
  display:inline-block;
  width:50px;
  text-align:center;
  color:#0088CC;
  line-height:28px;
  padding:0 8px;
  cursor:pointer;
}


/* JSON syntax highlighting */
#request,
#response {
  font-family:'inconsolata',monospace;
  font-size:13px;
  line-height:20px;
  padding:6px;
  background:#f5f5f5;
  border:1px dotted #aaa;
  border-radius:4px;
  cursor:text;
  overflow:auto;
}
#status > div {
  border-bottom:1px dotted #aaa;
}
#description {
  margin-top:10px;
  padding:15px;
  border-radiuS:4px;
  font-size:16px;
  color:#3a87ad;
  background:#d9edf7;
  border:1px dotted #3a87ad;
}

#selected_command {
  margin-top:-32px;
}

#selected_command a {
  text-decoration:none;
  color:#3a87ad;
}

#tooltip {
  position:absolute;
  display:none;
  padding:8px 16px;
  border-radius:4px;
  background:#FBEFD5;
  border:1px dotted #7A6943;
  color:#7A6943;
  font-family:'open sans';
  font-weight:300;
  font-size:14px;
  line-height:1.5em;
  max-width:300px;
  z-index:99;
}

.CodeMirror {
  background:inherit !important;
  color:inherit !important;
  height: auto !important;
  line-height:1.3 !important;
  font-size:14px !important;
}

.CodeMirror-selected {
  background:#ddd !important;
}

/* JSON property */
span.cm-string:first-of-type {
  font-weight:bold !important;
  color:#574C57 !important;
}

span.cm-string {
  color:#516E41 !important;
}

span.cm-number {
  color:#F05E1C !important;
}

span.cm-atom {
  color:#66327C !important;
}