:root {
  --prototype-side:rgba(255,255,255,0.5);
  --prototype-icon:#363636;
  --prototype-bg:#e6e6e6;
  --prototype-border:1px solid rgba(0,0,0,.15);
  --prototype-nav-bg:rgba(255,255,255,1);
  --prototype-interface-bg:rgba(255,255,255,0.8);
  --prototype-btn-bg:#e0e1e2;
  --prototype-btn-color:rgba(0, 0, 0, 0.6);
  --prototype-popup-bg:rgba(0,0,0,0.7);
  --prototype-a:#252525;
  --prototype-a-hover:#101010;
  --prototype-popup-a:rgba(0,0,0,0.1);
}
.prototype {
  background-color:var(--prototype-bg);
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
}
.prototype .popup .bg,
.prototype .side > div,
.prototype .interface {
  overflow-y:scroll;
  overflow-x:hidden;
  display:block;
}
.prototype .popup {
  transition:var(--transition);
}
.prototype .popup .bg,
.prototype .popup .content,
.prototype .popup {
  width:100vw;
  height:100vh;
  display:inline-block;
  position:fixed;
  z-index:1000;
  top:0;
  left:0;
  bottom:0;
  right:0;
}
.prototype .popup .bg {
  cursor:pointer;
  z-index:1;
}
.prototype .popup .content {
  z-index:2;
  left:calc(50vw - 300px);
  width:600px;
  height:100vh;
}
.prototype .popup .content.search li.title {
  color:rgba(0,0,0,0.5);
  font-size:12px;
  padding:6px 10px;
 }
.prototype .popup .content.search li a {
  padding:10px;
  width:calc(100% - 20px);
  display:inline-block;
  border-radius:var(--radius);
  cursor:pointer;
}
.prototype .popup .content.search li a span {
  mix-blend-mode:difference;
  filter:invert(1);
}
.prototype .popup .content.search li hr,
.prototype .popup .content.search li:hover a {
  background-color:var(--prototype-popup-a);
}
.prototype .popup .content.search li hr {
  height:1px;
  border:none;
  width:calc(100% - 20px);
  margin:8px 10px;
  display:inline-block;
}
.prototype a:hover {
  color:inherit;
}
.prototype .pill li.selected a:hover, 
.prototype .pill li.selected a {
  background-color:var(--prototype-interface-bg);
}
.prototype .interface,
.prototype > .nav,
.prototype > section {
  position:fixed;
}
.prototype .nav {
  background-color:var(--prototype-nav-bg);
  display:none;
}
.prototype.has-tabs .nav.tabs,
.prototype.has-top .nav.top,
.prototype.has-right .nav.right,
.prototype.has-bottom .nav.bottom,
.prototype.has-left .nav.left {
  display:block;
}
.prototype .nav.left,
.prototype .nav.right {
  width:40px;
  height:100vh;
  top:0;
  z-index:3;
}
.prototype .nav.top,
.prototype .nav.bottom {
  width:100vw;
  height:40px;
  left:0;
  z-index:4;
}
.prototype .nav.top li.title ,
.prototype .nav.bottom li.title {
  font-size:20px;
  line-height:16px;
  font-weight:900;
}
.prototype .nav .top {
  top:0;
  position:absolute;
}
.prototype .nav .bottom {
  bottom:0;
  position:absolute;
}
.prototype .nav.left {
  border-right:var(--prototype-border);
  left:0;
}
.prototype .nav.top {
  border-bottom:var(--prototype-border);
  top:0;
}
.prototype .nav.right {
  border-left:var(--prototype-border);
  right:0;
}
.prototype .nav.bottom {
  border-top:var(--prototype-border);
  bottom:0;
}
.prototype.has-top .nav nav.top {
  margin-top:41px;
}
.prototype.has-bottom .nav nav.bottom {
  margin-bottom:31px;
}
.prototype .nav.left li a span,
.prototype .nav.right li a span {
  display:none;
}
.prototype .nav li a span {
  line-height:20px;
  font-size:12px;
  margin-left:5px;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
   -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
      user-select:none;
}
.prototype li {
  padding:0;
}
.prototype .nav.top li.drop ul {
  position:absolute !important;
  background:var(--prototype-nav-bg);
  box-shadow:0 2px 5px var(--black-10o),0 2px 10px var(--black-10o);
  border-radius:0.5rem;
  font-size:12px;
  min-width:140px;
  display:none;
  padding:10px;
  top:38px;
  z-index:10000;
  left:0;
}
.prototype .nav.top .right li.drop ul {
  left:unset;
  right:0;
}
.prototype .nav.top li.drop ul li {
  width:100%;
}
.prototype .nav.top li.drop ul li a {
  padding:4px;
}
.prototype .nav.top li.drop {
  padding-right:24px;
  cursor:pointer;
}
.prototype .nav.top li.drop.img {
  padding-right:inherit;
}
.prototype .nav.top li.drop.open ul {
  display:block;
 }
.prototype .nav.top li.drop::after {
  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:6px solid var(--prototype-icon);
  content:'';
  position:absolute;
  top:calc(50% - 2px);
  right:12px;
  z-index:10;
  display:inline-block;
  pointer-events:none;
  opacity:0.3;
}
.prototype .nav.top li.img.drop::after {
  display:none;
}
.prototype .nav.top li.drop.open::after {
  border-top:unset;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:6px solid var(--prototype-icon);
}
.prototype .nav li.drop > span,
.prototype .nav li a {
  padding:10px;
  display:inline-block;
}
.prototype .nav.bottom li a {
  padding:4px 10px;
}
.prototype .nav.bottom {
  height:30px;
}
.prototype .nav li.img a {
  opacity:1;
  padding:0;
}
.prototype .nav li.img img {
  width:40px;
  height:40px;
}
.prototype .nav li.img.circle img {
  width:30px;
  height:30px;
  margin:5px;
  border-radius:50%;
}
.prototype .nav .icon {
  width:20px;
  height:20px;
  background-color:var(--prototype-icon);
}
.prototype .nav.top nav ul li,
.prototype .nav.bottom nav ul li {
  width:auto;
}
.prototype .nav.top .icon,
.prototype .nav.bottom .icon {
  width:14px;
  height:14px;
  margin:3px 0 0 0;
}
.prototype .nav.top li:last-child .icon, 
.prototype .nav.bottom li:last-child .icon {
  margin:3px 3px 0 0;
}
.prototype .side {
  z-index:2;
  top:0;
  width:300px;
  height:100vh;
  background-color:var(--prototype-side);
  display:none;
}
.prototype .side.left {
  left:0;
  border-right:var(--prototype-border);
}
.prototype .side.right {
  right:0;
  border-left:var(--prototype-border);
}
.prototype .side > div {
  width:100%;
  height:100vh;
}
.prototype .side > div {
  margin:0 0 0 0;
}
.prototype.has-left .side.left > div,
.prototype.has-right .side.right > div {
  width:calc(100% - 40px);
}
.prototype.has-top .side > div,
.prototype.has-bottom .side > div {
  height:calc(100vh - 40px);
}
.prototype.has-top.has-bottom .side > div {
  height:calc(100vh - 80px);
}
.prototype.has-top .side.left > div,
.prototype.has-top .side.right > div {
  margin-top:40px;
}
.prototype.has-right .side.right > div {
  margin-right:40px;
}
.prototype.has-left .side.left > div {
  margin-left:40px;
}
.prototype .side form,
.prototype .side nav {
  margin:0;
  padding:14px 10px 20px;
  border-bottom:var(--prototype-border);
  width:calc(100% - 20px);
}
.prototype .side nav li.title {
  font-weight:bold;
  line-height:30px;
  text-transform:uppercase;
  font-size:12px;
  opacity:0.2;
}
.prototype .side nav li {
  font-size:16px;
  width:100%;
}
.prototype .side nav li > a {
  border-radius:6px;
  display:inline-block;
  padding:0 10px;
  width:calc(100% - 20px);
  line-height:38px;
  color:var(--prototype-a);
}
.prototype .side nav li > a:hover {
  color:var(--prototype-a-hover);
}
.prototype .side nav li a i.icon {
  margin-top:11px;
  width:17px;
  height:17px;
  opacity:0.5;
}
.prototype .side nav li a .tag {
 float:right;
 margin-top:12px;
}
.prototype .side nav li.text {
 line-height:14px;
 font-size:12px;
 padding:10px 0 10px 4px;
 opacity:0.5;
}
.prototype .side nav li.text a {
  padding:0;
  line-height:22px;
}
.prototype .side nav li:hover > a {
  background-color:rgba(0,0,0,0.03);
}
.prototype .side nav li.selected:hover > a,
.prototype .side nav li.selected > a:hover,
.prototype .side nav li.selected > a {
  background-color:var(--prototype-btn-bg);
  color:var(--prototype-btn-color) !important;
}
.prototype .side nav li.selected > a .tag {
  background-color:var(--prototype-btn-bg);
  color:var(--prototype-btn-color);
}
.prototype button i.icon,
.prototype .button i.icon,
.prototype .side nav li.selected > a i.icon {
  background-color:var(--prototype-btn-color);
  opacity:1;
}
.prototype button,
.prototype .button {
  background-color:var(--prototype-btn-bg);
  color:var(--prototype-btn-color) !important;
}
.prototype button:hover,
.prototype .button:hover {
  background-color:var(--prototype-btn-color);
  color:var(--prototype-btn-bg) !important;
}
.prototype button:hover i.icon,
.prototype .button:hover i.icon {
  background-color:var(--prototype-btn-bg);
  opacity:1;
}
.prototype .side form h1 {
  font-size:14px;
  margin:2px 0;
}
.prototype .interface {
  z-index:1;
  top:10px;
  left:10px;
  right:10px;
  bottom:10px;
  padding:0;
}
.prototype.has-top .interface {
  top:50px;
}
.prototype.has-right .interface {
  right:50px;
}
.prototype.has-bottom .interface {
  bottom:40px;
}
.prototype.has-left .interface {
  left:50px;
}
.prototype.has-top.has-tabs .interface {
  top:86px;
}
.prototype.open-left .side.left,
.prototype.open-right .side.right {
  display:block;
}
.prototype.open-left .interface {
  left:310px;
}
.prototype.open-right .interface {
  right:310px;
}
.prototype.open-left.open-right .interface {
  width:calc(100% - 640px);
  left:310px;
}
.prototype .interface nav {
  width:100%;
  margin:0 0 6px;
  display:inline-block;
 }
.prototype .interface nav li {
 width:auto;
 line-height:38px;
}
.prototype .interface nav li a > .icon {
  margin:13px;
 }
.prototype .interface nav li.title {
 font-size:18px;
 font-weight:bold;
 padding-left:4px;
}
.prototype .interface nav li.title.header {
 font-size:28px;
}
.prototype table td, 
.prototype table th {
 border:none !important;
 vertical-align:middle;
}
.prototype table th.pointer {
 color:inherit;
}
.prototype table tr {
 border-bottom:var(--prototype-border);
}
.prototype table tr, 
.prototype table th, 
.prototype table td {
 background-color:inherit !important;
 color:inherit;
}
.prototype .interface nav li button > .icon, 
.prototype .interface nav li a.button > .icon {
 margin:14px 4px 0 0;
 width:.21em;
 height:.21em;
 float:left;
}
.prototype .nav.tabs {
  top:0;
  z-index:0;
  border-bottom:0;
  background-color:rgba(0,0,0,0.03);
  left:0;
  right:0;
  padding:3px;
}
.prototype.interface-bg .interface {
  background-color:var(--prototype-interface-bg);
  border-radius:3px;
  padding:10px;
}
.prototype.interface-bg .nav.tabs {
  background-color:unset;
  padding:10px 9px 0;
}
.prototype .nav.tabs nav {
  line-height:20px;
  height:33px;
}
.prototype.has-top .nav.tabs {
  top:40px;
}
.prototype.has-tabs .interface {
  top:46px;
}
.prototype.has-left .nav.tabs {
  left:41px;
}
.prototype.has-right .nav.tabs {
  right:41px;
}
.prototype.has-left.open-left .nav.tabs {
  left:301px;
}
.prototype.has-right.open-right .nav.tabs {
  right:301px;
}
.prototype .nav.tabs ul {
  height:unset;
}
.prototype .nav.tabs ul li {
  width:auto;
  float:left;
  border:none;
  height:26px;
  padding:0 !important;
  cursor:pointer;
  background-color:inherit;
}
.prototype .nav.tabs ul li.tab {
  width:auto;
  float:left;
  border:none;
  height:26px;
  padding:0 !important;
  cursor:pointer;
}
.prototype .nav.tabs ul li i.icon {
  width:12px;
  height:12px;
  margin:1px 0;
}
.prototype .nav.tabs ul li.tab > div,
.prototype .nav.tabs ul li a {
  padding:7px;
  margin:0 2px 0 0;
  line-height:20px;
  border-radius:3px;
  background-color:inherit;
}
.prototype .nav.tabs ul li.right.tab > div,
.prototype .nav.tabs ul li.right a {
  margin:0 0 0 2px;
}
.prototype .nav.tabs ul li.tab > div {
  padding:6px 10px;
}
.prototype .nav.tabs ul li.tab.selected > div {
  background-color:#eeeeee;
}
.prototype.interface-bg .nav.tabs ul li.tab.selected > div {
  background-color:var(--prototype-nav-bg);
}
.prototype.interface-bg .interface,
.prototype.interface-bg .nav.tabs ul li.tab.selected > div {
  box-shadow:0 2px 5px var(--black-10o),0 2px 10px var(--black-10o);
}
.prototype .nav.tabs ul li.tab a {
  padding:0;
  margin:0;
  border-radius:0;
  background-color:inherit;
}
.prototype .nav.tabs ul li.tab a,
.prototype .nav.tabs ul li.tab a:hover {
  color:inherit;
}
.prototype .nav.tabs ul li.tab i.icon {
  margin:5px 0 0 0;
}
.prototype .nav.tabs ul li.tab.selected i.icon {
  background-color:var(--prototype-btn-color);
}
.prototype .nav.tabs ul li.tab .menu i.icon {
  background-color:var(--prototype-icon);
}
.prototype .nav.tabs ul li.right {
  float:right;
}
.prototype .nav.tabs ul li.tab {
  /*padding:2px 12px !important;*/
  border-radius:0;
  height:33px;
}
.prototype .nav.tabs ul li.icon:hover > a,
.prototype .nav.tabs ul li:hover > div {
  background-color:#eeeeee;
}
.prototype .nav.tabs ul li.tab .menu {
  margin:0;
  float:right;
  opacity:0.0;
  padding:6px 0 0 0;
}
.prototype .nav.tabs ul li.tab .menu i.icon {
  margin:0 0 0 10px;
  width:10px;
  height:10px;
}
.prototype .nav.tabs ul li.tab:hover .menu {
  opacity:0.7;
}
.prototype .nav.tabs ul li.selected:hover,
.prototype .nav.tabs ul li.selected {
  background-color:var(--prototype-bg);
}
.prototype .nav.tabs ul li.selected a {
  background-color:inherit;
}
.prototype .nav li ul li img {
  width:16px !important;
  height:16px !important;
  display:inline-block;
  margin:0 0 -4px;
}
@media (max-width:480px) {
  .prototype table thead {
    display:none;
  }
  .prototype td, .prototype tr { display:block;}
  /* Hide table headers (but not display:none;, for accessibility) */
  .prototype thead tr {
    position:absolute;
    top:-9999px;
    left:-9999px;
  }
  .prototype table tr,
  .prototype tr { 
    border:1px solid var(--gray-40);
    padding:10px;
    border-radius:var(--radius);
    background-color:var(--white-60) !important;
    width:calc(100% - 20px);
  }
  .prototype tr + tr { 
    margin-top:1em;
  }
  .prototype td {
    position:relative;
    text-align:left !important;
    font-size:inherit !important;
    height:auto !important;
    margin-bottom:8px;
  }
  .prototype table td:last-child {
    margin-bottom:0;
  }
  .prototype td:before {
    content:attr(data-label);
    display:inline-block;
    margin-left:0;
    width:100%;
    white-space:nowrap;
    font-size:80%;
    text-transform:uppercase;
    text-align:left;
    padding-left:0;
    opacity:0.3;
  }
  .prototype td:not([data-label]):before, .prototype td[data-label=""]:before {
    display:none;
  }
  .prototype table td.right {
    padding:0 0 0 6px !important;
  }
  .prototype nav ul,
  .prototype nav.right, 
  .prototype nav.left {
    width:unset;
  }
  .prototype .interface nav ul,
  .prototype .interface nav {
    width:100%;
  }
  .prototype .interface nav li.title.header {
    font-size:20px;
    /*width:84%;*/
  }
  .prototype td {
    padding:0;
  }
  .prototype.open-left .tabs,
  .prototype.open-left .interface {
    left:50px;
  }
  .prototype.open-right .tabs,
  .prototype.open-right .interface {
    right:50px;
  }
  .prototype .popup .content {
    left:20px;
    right:20px;
    width:auto;
    top:10px;
  }
  .prototype .nav.top,
  .prototype .tabs,
  .prototype .interface nav {
    overflow-y:hidden;
    overflow-x:scroll;
    display:block;
  }
  .prototype .nav.top,
  .prototype .tabs nav,
  .prototype .interface nav ul { 
    width:max-content;
  }
  .prototype .tabs nav { 
    padding:0 8px 0 0;
  }
  .prototype .nav.tabs ul li.right.tab > div, 
  .prototype .nav.tabs ul li.right a {
    margin:3px 0 0 2px;
  }
}
@media (max-width:1200px) {
  
}