html,body {font-family: "Overpass", sans-serif !important; padding: 0; margin: 0; color:#000; line-height: 1.6em;}
code,.code {font-family: 'Overpass Mono', monospace !important; font-size:1em;}

h1,h2,h3,h4 {font-weight:100; }

hr {border-color: #FFF200; border-width: 0 0 2px 0; margin: 2em 0; max-width: none; }

progress,meter {width:100%;}

input,select,textarea {font-family: 'Overpass Mono', monospace !important;}
input[type] {width:100%; border:none; padding: 10px; box-sizing:border-box; }
input[type=text] {box-shadow: 0 0 10px rgba(0,0,0,0.1) inset}
label > input[type] {width:auto; min-width: 0;}
textarea {font-size:0.85em;}
table input[type] {padding: 5px;}
table select {padding-top: 5px !important; padding-bottom: 5px !important;}
table button {width:100%;}
table tbody {border: none;}
table tfoot {border-top:1px solid #000;}

.dirty {background-color: #FFF200 !important;}

button {padding:10px 30px; text-transform: uppercase; cursor: pointer; transition: all 0.5s; background:#000; color:#FFF;  }
button:hover {background:#FFF200; color:#000; }

#app ::-webkit-scrollbar { height: 5px; width:5px; }
#app ::-webkit-scrollbar-track { background: transparent; }
#app ::-webkit-scrollbar-thumb { background: #FFF200; }

a {text-decoration: none; color:inherit;}
a:hover {color:#FFF200;}

del {color:#CCC;}

.delete {color:#C00;}
i.delete {cursor:pointer;}

.text-center {text-align: center;}
.text-right {text-align: right;}

th {text-align: left;}
tr.highlight {background: #FFF200 !important;}

.clear {clear:both;}

.switch .switch-paddle {border-radius: 1rem; font-weight: 500;}
.switch .switch-inactive {right:10%;}
.switch .switch-paddle::after {border-radius: 50%;}

#app {display:flex; flex-direction: row; }

#app #sidebar {flex-basis: 15%; height:100vh; overflow-y: auto; background: #000; color:#FFF; min-width: 180px; }
#app #sidebar .texture {padding: 1em; }
#app #sidebar .branding {padding-bottom: 1em; display: flex; align-items: center;}
#app #sidebar .branding img {float:left; margin: 0 1em 1em 0;}
#app #sidebar .group {margin: 1em 0 2em; }
#app #sidebar .group ul {list-style: none; padding: 0; margin: 0;}
#app #sidebar .group ul ul {display: block; margin-left: 10px;}
#app #sidebar .group ul.active-parent {display: block;} 
#app #sidebar .group ul li.active > ul {display: block;} 
#app #sidebar .group li {margin-bottom: 0;}
#app #sidebar .group h3 {font-size:1em; text-transform: uppercase; margin-bottom: 0.5em;}
#app #sidebar .group ul.sub a {font-size:0.9em;}
#app #sidebar li.active > a {color:#FFF200;}

#app #content {height:100vh; overflow-y: auto; width: 100%;}
#app #content .texture {padding: 1em; height: 100%; }

#app #content .panel {padding: 1em 1em; height: 100%; }
#app #content .panel h1 { border-bottom: 1px solid #EEE; padding-bottom: 1em; margin-bottom: 1em;}
#app #content .panel a {text-decoration: underline; font-weight: bold;}


.snippet {background:#000; border-radius: 10px; overflow: hidden; font-size: 95%; color:#FFF; margin-top: 2em; line-height: 1.2em; }
.snippet:first-child {margin-top: 70px;}
.snippet .title {background:#000; margin: 0; padding: 0.75em 1em; color:#FFF; text-transform: uppercase; font-size: 90%; font-weight: 700; display: block; }
.snippet pre {padding:1.5em 1em; display:flex; }
.snippet .lines {text-align: right; padding: 0 10px; color:rgba(255,255,255,0.5);  }
.snippet .lines span {display: block;}
.snippet code {color:#FFF; padding-left: 10px; padding-right:20px; overflow: auto; -webkit-overflow-scrolling:touch; font-size: 0.9em;}
.snippet .preformatted span.string {color:#00CC00;}
.snippet .preformatted span {display: block; padding-left: 10px;}
.snippet span.string {color:#00CC00;}
.snippet span.number {color:#CC00CC;}
.snippet span.boolean {color:#a4cdfe;}

.response {background:#EEE; border-radius: 10px; overflow: hidden; font-size: 95%; margin-top: 2em; line-height: 1em; }
.response .title {background:#DDD; margin: 0; padding: 0.75em 1em; text-transform: uppercase; font-size: 90%; font-weight: 700; display: block; }
.response pre {padding:1.5em 1em; display:flex; }
.response .lines {display:none;  }
.response .lines span {display: block;}
.response code {padding-left: 10px; padding-right:20px; overflow: auto; -webkit-overflow-scrolling:touch; font-size: 0.85em;}
.response .preformatted span.string {color:#00CC00;}

.reference {background:#EEE; border-radius: 10px; overflow: hidden; font-size: 95%;  line-height: 1.2em; margin-bottom: 2em; padding: 1em; }
.reference .overflow {max-height: 400px; overflow-y: auto; overflow-x: auto;}
.reference .title {background:#DDD; margin: 0; padding: 0.75em 1em; text-transform: uppercase; font-size: 90%; font-weight: 700; display: block; }
.reference table {  padding: 1em 0.75em; width:100%; font-size:0.85em; position: relative; }
.reference td, .reference th {padding:4px 5px; }
.reference th {vertical-align: top; position:sticky; top:0; background: #EEE; }
.reference tr td:first-child {font-weight: bold;}
.reference tr.delete input {text-decoration: line-through; color:#999;}
.reference .actions {display: flex; padding:10px 0;}
.reference .actions button {flex:1; }
.reference input {min-width:100px;}
.reference textarea {font-size:1em;}

.variable {border-bottom: 1px solid #EEE; padding: 0.75em 0; }
.variable:last-child {border-bottom: none;}
.variable .children {margin-left: 1em; border: 1px solid #EEE; padding-left: 1em; margin-top: 0.75em; border-radius: 10px; }
.variable .name {font-size:0.9em; font-weight: bold;}
.variable .type {font-weight: bold; padding-left: 5px;}
.variable .type, .variable .description {color:#999; font-size:0.9em;}

.values {margin-left: 1em; border: 1px solid #EEE; padding:0; margin-top: 0.75em; border-radius: 10px; font-size:90%; overflow: hidden;}
.values table {border-collapse:collapse; width:100%; }
.values table tr td {border-bottom:1px solid #EEE; padding: 0.25em 1em; }
.values table thead {background: #EEE;}
.values table thead td, .variable table tbody td:first-child {font-weight: bold; color:#000;}

@media screen and (max-width: 63.9375em) {
	#app #content .panel {padding: 3em 0;}
	#app #content .column {width:100%; }
	.snippet {margin-top: 1em;}
}