preview
*{
    -webkit-tap-highlight-color: transparent;
}

body, input{
  font: 1em sans-serif;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
}
body {
  user-select: none;
}
input {
  user-select: text;
}
body.dark, body.dark input, body.dark textarea,
body.dark select, body.dark button {
  color: #fff;
}
body.light {
  background: #fff;
}
body.dark {
  background: #222;
}
input, textarea, select, button, summary {
	background: none;
	font: 1em 'OpenSans', sans-serif;
	outline: none;
	border: none;
}
input, textarea, .content h2, .content p {
	display: block;
	box-sizing: border-box;
	width: 100%;
}

input[type="submit"] {
  -webkit-appearance: none;
	width: auto;
	cursor: pointer;
	padding: 0.5em;
	border-radius: 2rem;
	display: inline-block;
}
label {
	cursor: pointer;
}
hr {
  border: 1px solid #7d7d7d;
  border-top: none;
}
body.dark select {
  border: 1px solid #fff;
}
body.light select {
  border: 1px solid #000;
}
select {
  border-radius: 2rem;
  padding: 0.25rem 0.5em;
  transition: background-color ease .25s;
}
select:focus {
  background-color: rgba(68,153,204,.5);
}
input[type="checkbox"]{
	display: none;
	width: 1em;
}
textarea {
	resize: vertical;
}
input[type="file"] {
	visibility: hidden;
	width: 0;
	height: 0;
	box-sizing: border-box;
}
h1, h2, h3, h4 {
	margin: 0;
	box-sizing: border-box;
}
h1 {
    cursor: default;
	font-size: 1.25em;
}
h2 {
	font-size: 1.125em;
}
h3, h4 {
	font-size: 1em;
}
li {
	line-height:1.25em;
	padding: .25em 0;
}
pre {
   font-family: "courier new", courier, monospace;
   font-size: .95em;
   -moz-tab-size: 3;
   tab-size: 3;
   white-space: pre-wrap;
}
a, span, button {
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

nav {
	overflow-y: auto;
	overflow-x: hidden;

	position: absolute;
	height:100vh;
	width:3.5rem;

	display: flex;
	flex-flow: column;
	justify-content: space-between;

	z-index: 71;
	transition: 0.25s ease width;

	font-weight: bold;
  box-shadow: 0 0 .5em rgba(0,0,0,.25);
}
body.dark nav, body.dark nav #menu::after {
	background-color: #333;
}
body.light nav, body.light nav #menu::after {
	background-color: #fff;
}
body.dark nav a:link, body.dark nav a:visited {
	color: #fff;
}
body.light nav a:link, body.light nav a:visited {
	color: #000;
}
nav a, nav span {
	white-space: nowrap;
	cursor: pointer;
	transition: .125s ease border-color, .25s ease background-color, .25s ease width;
	display: flex;
	align-items: center;
	border: 1px solid transparent;
  margin: .25rem
}
nav a:before, nav span:before, button.icon:before, .button.icon:before,
label.icon:before, span.icon:before {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	background: url('./media/icons.svg');
	content: '';
	margin: 0;
	flex-shrink: 0;
}
body.light .icon:before, body.light nav a:before,
body.light summary:before, body.light button:before,
body.light nav #menu:before {
  filter: invert(1);
}
nav a::before, nav span::before {
  margin: 0.75rem 0.75rem 0.75rem 0.71rem;
}
nav a.on {
  background-color: rgba(84,190,255,0.25);
}
body.light nav.on {
  box-shadow: 0.25em 0em 0.5em rgb(0,0,0,0.125);
}
@media only screen and (min-width: 40rem) {
  nav a, nav span {
    justify-content: left;
    width: 3rem;
  }
  nav.on, nav div {
	  width: 13.5em;
  }
  nav.on a {
    width: 13rem;
  }
}
nav a, nav span {
  border-radius: .5rem;
  height: 3rem;
  overflow: hidden;
  box-sizing: border-box;
}
@media only screen and (max-width: 26rem) {
  nav #panels {
    justify-content: space-between !important;
  }
}
@media only screen and (max-width: 39.99rem) {
  nav {
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 3.5rem;
    overflow-y: hidden;
  }
  nav span#menu {
    display: none;
  }
  nav #panels {
    height: 3.5rem;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    width: 100vw;
    overflow-x: auto;
  }
  nav #extra {
    display: none;
  }
  nav a, nav span {
    flex-direction: column;
    font-size: .7rem;
    font-weight: normal;
    overflow: hidden;
    height: 2rem;
    width: 3rem;
    font-weight: bold;
    overflow: visible;
  }
  nav a:before {
    transition: margin ease .25s
  }
  nav a::before, nav span::before {
    margin: 0.75rem;
  }
  nav a.on::before {
    margin: 0.25rem 0.75rem;;
  }
  nav a:hover, nav span:hover {
    border-color: transparent !important;
  }
}
/* Logo */
nav #menu {
  font-size:1.5rem;
  color: #4499cc;
}
nav #menu::after {
	display: block;
	width: 2rem;
	height: 2rem;
	margin-left: 0.4rem;
	position: absolute;
	background: url('./media/icons.svg');
	content: '';
	flex-shrink: 0;
  transition: .125s ease margin-left;
	background-position: left calc(-2rem*22) top;
	background-size: auto 4rem;
	z-index: 1;
}
nav.on #menu {
  width: 12rem;
}
nav.on #menu:after {
  margin-left: 2.7rem;
}
/*Icons*/
nav #menu::before {
  transition: .125s ease background-position;
	background-position: left calc(-1.5rem*0) bottom;
	margin-right: 2.5rem
}
nav #settings::before {
	background-position: left calc(-1.5rem*3) top;
}
nav #dashboard::before {
	background-position: left calc(-1.5rem*1) top;
}
nav #dashboard.on::before {
	background-position: left calc(-1.5rem*1) bottom;
}
nav #dashboard_edit::before {
	background-position: left calc(-1.5rem*2) top;
}
nav #notification::before {
	background-position: left calc(-1.5rem*4) top;
}
nav #notification.on::before {
	background-position: left calc(-1.5rem*4) bottom;
}
nav #logout::before {
	background-position: left calc(-1.5rem*5) top;
}
button#add:before, .button#add:before, button#raise:before {
	background-position: left calc(-1.5rem*6) top;
}
button#remove:before {
	background-position: left calc(-1.5rem*7) top;
}
button#lower:before, button#discard:before {
	background-position: left calc(-1.5rem*8) top;
}
button#edit:before, .button#edit:before {
	background-position: left calc(-1.5rem*9) top;
}
div#dashboard.on .button#edit:before {
	background-position: left calc(-1.5rem*9) bottom;
}
nav #admin::before {
	background-position: left calc(-1.5rem*11) top;
}
nav #admin.on::before {
	background-position: left calc(-1.5rem*11) bottom;
}
button#upload::before, label#upload::before {
	background-position: left calc(-1.5rem*15) top;
}
button#download:before {
	background-position: left calc(-1.5rem*14) top;
}
button#run:before {
	background-position: left calc(-1.5rem*18) top;
}
button#disconnect:before {
	background-position: left calc(-1.5rem*20) top;
}
button#fetch:before {
	background-position: left calc(-1.5rem*26) top;
}
span.tips:before {
	background-position: left calc(-1.5rem*27) top;
}
button#share:before {
	background-position: left calc(-1.5rem*29) top;
}
button#unshare:before {
	background-position: left calc(-1.5rem*29) bottom;
}
button#write:before {
	background-position: left calc(-1.5rem*32) top;
}
button#save:before {
	background-position: left calc(-1.5rem*31) top;
}
button#rename:before {
	background-position: left calc(-1.5rem*32) top;
}
span.warnings:before {
	background-position: left calc(-1.5rem*33) top;
}
button#connect:before {
	background-position: left calc(-1.5rem*21) top;
}
button#scan:before {
	background-position: left calc(-1.5rem*34) top;
}
.listy.more-button div:before {
	background-position: left calc(-1.5rem*35) top;
}
button#code:before {
  background-position: left calc(-1.5rem*17) top;
}
button#copy:before {
  background-position: left calc(-1.5rem*36) top;
}
button#mqtt:before {
  background-position: left calc(-1.5rem*40) top;
}
button#stream:before {
  background-position: left calc(-1.5rem*42) top;
}
button#storage:before {
  background-position: left calc(-1.5rem*41) top;
}
button#chart:before {
  background-position: left calc(-1.5rem*43) top;
}
button#switch:before {
  background-position: left calc(-1.5rem*44) top;
}
button#range:before {
  background-position: left calc(-1.5rem*48) top;
}
button#gauge:before {
  background-position: left calc(-1.5rem*49) top;
}
button#coordinate:before {
  background-position: left calc(-1.5rem*50) top;
}
button#drawing:before {
  background-position: left calc(-1.5rem*51) top;
}
nav #user-info {
  text-align: center;
  font-weight: normal;
  font-size: 0.8rem;
  width: 100%;
  padding: 0.5rem 0.25rem;
  opacity: 0;
  overflow: hidden;
  transition: .125s ease opacity;
  transition-delay: .25s;
  border-top: 1px solid rgba(125,125,125,.3);
  margin-top: auto;
}
nav.on #user-info {
  opacity: 1;
}
nav #user-info #user-name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 0.15rem 0;
}
nav #user-info #user-role {
  display: block;
  font-size: 0.7rem;
  opacity: 0.7;
  text-transform: capitalize;
  padding-bottom: 0.15rem;
}
nav #user-info #logout-link {
  display: inline-block;
  margin-top: 0.3rem;
  color: #4499cc;
  cursor: pointer;
  font-size: 0.8rem;
  text-decoration: none;
  border: 1px solid #4499cc;
  border-radius: 0.25rem;
  padding: 0.15rem 0.5rem;
  text-align: center;
  justify-content: center;
  height: auto;
}
nav #user-info #logout-link::before {
  display: none;
}
nav #user-info #logout-link:hover {
  background: rgba(68,153,204,.2);
}
nav #app-version {
  text-align: center;
  font-weight: normal;
  font-size: 0.9rem;
  width: 100%;
  border-bottom: 1px solid #444;
  border-top: 1px solid #444;
  opacity: 0;
  transition: .125s ease opacity;
  transition-delay: .25s;
}
body.dark nav#app-version {
  color: #aaa;
}
body.light nav#app-version {
  color: #7d7d7d;
}
nav.on #app-version {
  opacity: 1;
}

section {
  overflow: hidden;
	position: absolute;
	display: none;
	left: -1em;
	opacity: 0;
}
@media only screen and (min-width: 40em) {
  section{
	  width: calc(100vw - 3.5rem);
	  height: calc(100vh - 1.5rem);
	  margin-left: 3.5rem;
	}
}

@media only screen and (max-width: 39.99rem) {
  section {
    width: 100vw;
    height: calc(100vh - 3.5rem);
  }
}
section.ani {
  display: block;
}
section.ani.on {
  left: 0;
  opacity: 1;
}
@media screen and (orientation:landscape){
  section {
  	transition: .125s ease left, .125s ease opacity;
  }
  section.pos2, section._pos2{
    border-left: 1px solid rgba(125,125,125,0.25);
  }
}
@media screen and (orientation:landscape) and (min-width: 40rem) {
  section.pos1, section._pos1{
    width: calc(50vw - 1.85rem);
  }
  section.pos2, section._pos2{
    width: calc(50vw - 1.85rem);
    left: calc(50vw - 1.85rem) !important;
  }
}
@media screen and (orientation:landscape) and (max-width: 39.99rem) {
  section.pos1, section._pos{
    width: 50vw;
  }
  section.pos2, section._pos2{
    width: 50vw;
    left: 50vw !important;
  }
}
@media screen and (orientation:portrait){
  section {
  	transition: .125s ease top, .125s ease opacity;
  }
  section.pos2, section._pos2{
    border-top: 1px solid #7d7d7d;
  }
}
@media screen and (orientation:portrait) and (min-width: 40rem) {
  section.pos1, section._pos1{
    height: calc(50vh - 0.75rem);
    top: 0vh;
  }
  section.pos2, section._pos2{
    height: calc(50vh - 0.75rem);
    top: calc(50vh - 0.75rem);
  }
}
@media screen and (orientation:portrait) and (max-width: 39.99rem) {
  section.pos1, section._pos1{
    height: calc(50vh - 1.85rem);
    top: 0vh;
  }
  section.pos2, section._pos2{
    height: calc(50vh - 1.85rem);
    top: calc(50vh - 1.85rem);
  }
}
.header {
	display: flex;
  justify-content: space-between;
  align-items: center;
	overflow: hidden;
}
button.icon, .button.icon {
    cursor: pointer;
}
button.icon, label.icon {
    border-radius: 2rem;
    border: 1px solid transparent;
    background-color: transparent;
    padding: .25rem;
    transition: border-color ease .125s;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
}

body.dark button.icon:hover, body.dark label.icon:hover,
body.dark button.icon:focus, body.dark label.icon:focus {
	border-color: #fff;
}
body.light button.icon:hover, body.light label.icon:hover,
body.light button.icon:focus, body.light label.icon:focus-within {
	border-color: #000;
}
nav a:hover, nav a:focus {
  border-color: rgb(84,190,255);
}
button.noicon {
	border: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
button.icon.text, label.icon.text {
    align-items: center;
    font-size: 1rem;
    padding: 0.25em 0.5em;
    white-space: nowrap;
}
.popup {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0);
  z-index: 73;
  transition: background-color ease .25s;
  top: 0;
  left: 0;
}
.popup.on, .popup.ani{
  display: block;
}
.popup.on{
  background: rgba(0,0,0,.4);
}
body.light .popup > div {
  background: #eee;
}
body.dark .popup > div {
  background: #222;
}
.popup > div {
  box-shadow: 0 .25em .5em rgba(0,0,0,0.5);
  border-radius: 1em;
  margin-top: 100vh;
  opacity: 0;
  transition: margin-top ease .25s, opacity ease .25s;
  box-sizing: border-box;
}
.popup.on > div {
  opacity: 1;
}

/* checkswitch, a pretty checkbox */
.checkswitch {
  -webkit-tap-highlight-color: transparent;
    display: flex;
    justify-content: space-between;
    line-height: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}
input.checkswitch[type="checkbox"] {
  -webkit-tap-highlight-color: transparent;
    display: none;
}
.checkswitch input:checked ~ span {
    background: #3298dc;
}
.checkswitch span {
    width: 2.5em;
    height: 1.5em;
    background: grey;
    display: inline-block;
    border-radius: 1.5em;
    position: relative;
    line-height: 1.5rem;
}
.checkswitch span::after {
    content: "";
    position: absolute;
    top: 0.074em;
    left: 0.075em;
    width: 1.35em;
    height: 1.35em;
    background: rgb(255, 255, 255);
    border-radius: 1.35em;
    transition: left 0.25s ease-out 0s, transform 0.25s ease-out 0s;
    box-shadow: rgb(0 0 0 / 20%) 0px 1px 3px;
}
.checkswitch input:checked ~ span::after {
    left: -0.27em;
    transform: translateX(100%);
}

/* notifications */
a#notification:after {
  content: '';
  display: block;
  width: .5em;
  height: .5em;
  position: absolute;
  background: rgba(255,0,0,0);
  margin: -1rem 0 0 1.75rem;
  border-radius: 100%;
}
a#notification.new:after {
  background: #4499cc;
}
#notify {
  z-index: 72;
  font-size: 0.9rem;
	left: -18rem;
  top: 19.75rem;
	padding: 0.75rem;
	position: fixed;
  box-shadow: 0 .5rem .5rem rgba(0,0,0,.125);
  user-select: none;
	transition: left ease .5s, bottom ease .5s, opacity ease .5s;
  border-radius: 1.5rem;
  opacity: 0;
  box-sizing: border-box;
}
body.light #notify {
  background: #d4efff;
}
body.dark #notify {
  background: #3b5666;
}
#notify.on {
	opacity: 1;
	left: 3.25em;
}
#notify hr {
  border: none;
  height: 1px;
  background-color: #fff;
}
@media screen and (max-width:39.99rem) {
  a#notification:after {
    margin: .75rem 0 0 1rem
  }
  #notify {
    width: calc(100vw - 2em);
    left: 0;
    margin: 0 1em 1em 1em;
    top: auto;
    bottom: -3em;
    text-align: center;
  }
  #notify.on {
    left: 0;
    bottom: 3.5em;
  }
}
section.default {
  overflow-y: auto;
}
body.light section.default {
  background: #fff;
}
body.dark section.default {
  background: #222;
}
section.default > .container {
  max-width: 50em;
  margin: 0 auto;
  padding: 0 0 1em 0;
}
section.default > .container > h2 {
  width: 100%;
  max-width: 50rem;
  top: 0;
  padding: 0.75rem 1rem 0.5rem 1rem;
  z-index: 2;
}
body.dark section.default > .container > h2 {
  background: #222;
}
body.light section.default > .container > h2 {
  background: #fff;
}
section.default > .container h3 {
  padding: 0 1em;
}
.cards {
  display: block;
}
.cards > span {
  display: flex;
  justify-content: space-between;
  padding: .5em;
  border: #444 1px solid;
  border-radius: .25em;
  margin: .25em;
  align-items: center;
  user-select: text;
}
.cards > span > span > div {
  font-size: .9em;
}
body.dark .cards > span > span > div {
  color: #aaa;
}
.cards h3 {
  font-weight: normal;
  word-break: break-word;
  padding: 0 !important;
}
#contextMenu > div {
  display: inline-block;
  border-radius: .25rem;
  transition: .125s ease opacity, .25s ease height;
  overflow: hidden;
  height: 0px;
  max-width: 12rem;
  position:absolute;
  top: 0;
  left: 0;
}
#contextMenu button, #contextMenu label {
  font-size: 1em;
  width: 100%;
  border-radius: 0;
  border: none;
  font-weight: normal;
  min-height: 2rem;
  box-sizing: border-box;
}
#contextMenu button:before, #contextMenu label:before {
  margin-right: .25rem;
}
#contextMenu button:hover, #contextMenu label:hover {
  background: rgba(68,153,204,.5);
}
#contextMenu button:focus, #contextMenu label:focus-within {
  background: rgba(68,153,204,.25);
}
#contextMenu h3 {
  margin: .5rem .5rem .25rem .5rem;
  font-size: 1rem;
  font-weight: normal;
}
#contextMenu input {
  padding: 0.5rem;
}
body.dark #contextMenu input {
  background: #000;
}
body.light #contextMenu input {
  background: #fff;
}
.funky {
  display: flex;
  justify-content: flex-start;
  padding: 0 .5rem;
  word-break: keep-all;
  white-space: nowrap;
  overflow-x: auto;
}
.funky button, .funky > span {
  padding: .5rem;
  min-width: 11rem;
  max-width: 18rem;
}
.funky button > div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: .5rem;
  padding: 4em .5em .5em 2em;
  width: 100%;
  box-sizing: border-box;
  text-align: right;
  transition: .125s ease transform;
}
.funky button:focus > div {
  transform: scale(0.98);
}
.listy {
  display: flex;
  justify-content: flex-start;
  word-break: keep-all;
  white-space: nowrap;
  flex-wrap: wrap;
  border-bottom: none !important;
  margin: 0 .5em;
}
body.dark .listy {
  background: #1c1c1c;
  border: 1px solid #111;
}
body.light .listy {
  background: #eee;
  border: 1px solid #aaa;
}

.listy button {
  cursor: pointer;
  padding: 0;
}
.listy > span {
  width: 100%
}
body.dark .listy > button,
body.dark .listy > span {
  border-bottom: 1px solid #111;
}
body.light .listy > button,
body.light .listy > span {
  border-bottom: 1px solid #aaa;
}
.listy > button, .funky > span {
  width: 100%;
}
.listy > button > div,
.listy > span > div {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: .5em;
  width: 100%;
  box-sizing: border-box;
  text-align: right;
  transition: .125s ease transform;
}
.listy > button:active > div {
  transform: scale(0.98);
}
.listy > button {
  transition: .25s ease background-color;
}
.listy > button.on:active > div {
  transform: scale(1) !important;
}
.listy > button.on {
  background-color: rgba(68,153,204,.25);
}
.listy > button:hover, .listy > button:focus {
  background-color: rgba(68,153,204,.5);
}
.listy > button.on {
  cursor: default;
}
.listy.more-button {
  border-top: none !important;
}
.listy.more-button button {
}
.listy.more-button div {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-block;
}
.listy div.row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.listy div.row {
  padding: .5rem .5rem 0 .5rem
}
.listy div.row:last-child {
  padding-bottom: .5rem !important;
}
.warnings, .tips {
  display: inline-flex;
  align-items: center;
  border: 1px solid #7d7d7d;
  padding: .5rem;
  border-radius: 2rem;
  opacity: 0.8;
  margin: .5rem auto;
  font-size: 0.9rem;
}
.warnings:before, .tips:before {
  margin-right: .25rem !important;
}
/* Status bar */
div#status-bar {
  width: calc(100vw - 3.5rem);
  height: 1.5rem;
  font-size: 0.9rem;
  position: absolute;
  top: calc(100vh - 1.5rem);
  right: 0;
  text-align: right;
  box-shadow: 0 0 .25em rgba(0,0,0,.25);
  display: flex;
  justify-content: space-between;
}
div#status-bar #globals {
  display: inline-block;
  min-width: 5rem;
  height: 1.5rem;
}
div#status-bar select  {
  border-radius: 0;
  padding: 0;
  border: none;
  opacity: 0;
  width: 6rem;
  position: absolute;
}
div#status-bar button.status-icon,
div#status-bar span.status-icon  {
  padding: .125rem .25rem;
  cursor: pointer;
  transition: background-color ease .125s;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  background-color: rgba(68,153,204,0);
}
div#status-bar button.status-icon:before,
div#status-bar span.status-icon:before {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	background: url('./media/icons.svg');
	background-size: auto 2.5rem;
	content: '';
	margin: 0;
	flex-shrink: 0;
	margin-right: .125rem;
}
div#status-bar #extra button,
div#status-bar #extra span {
  opacity: 0.8;
}
div#status-bar #extra button:hover,
div#status-bar #extra span:hover {
  opacity: 1;
}
div#status-bar span.status-icon:hover,
div#status-bar span.status-icon:focus,
div#status-bar button.status-icon:hover,
div#status-bar button.status-icon:focus {
  background-color: rgba(68,153,204,.5);
}
div#status-bar span#language select {
  cursor: pointer;
}
div#status-bar span#language:before {
  background-position: left calc(-1.25rem*46) top;
}
button#theme:before {
  background-position: left calc(-1.25rem*47) top !important;
}
button.on#theme:before {
background-position: left calc(-1.25rem*47) bottom !important;
}
body.light div#status-bar span#language:before {
  filter: invert(1);
}

@media screen and (max-width:39.99rem) {
  div#status-bar {
    display: none;
  }
}
section#notification .listy div.row > div {
  font-size: 0.8rem;
  padding-bottom: .25rem;
}
section#notification .header   {
  margin: 0.5rem .5rem 0.25rem 1rem;
}
section#notification .listy div.row {
  padding-left: 2.5rem;
}
section#notification .listy #discard {
  position: absolute;
  margin-left: .25rem;
  margin-top: -2.75rem;
}
section#notification .listy {
  white-space: inherit;
}
section#notification .listy h4 {
  text-align: left !important;
}
section#notification .listy > span {
  padding: .5rem;
}
div#status-bar button#forum:before {
  background-position: left calc(-1.25rem*45) top;
}

section#notification #splash {
  background-color: rgba(84,190,255,0.05);
  border-radius: 1.5rem;
  padding: 1rem 1rem .25rem 1rem;
}
section#notification #splash h3 {
  padding: 0
}
section#notification #splash div {
  font-size: 0.9rem;
}
nav #files::before {
	background-position: left calc(-1.5rem*13) top;
}
nav #files.on::before {
	background-position: left calc(-1.5rem*13) bottom;
}
section#files details {
  overflow: hidden;
  transition: .125s ease border;
}
section#files summary, section#files .listedFile {
  -webkit-tap-highlight-color: transparent;
  white-space: normal;
  cursor: pointer;
  display: flex;
  align-items: center;
}
section#files #fileOnProject > summary,
section#files #fileOnTarget > summary {
  font-weight: bold;
}

section#files #hidePane:before {
  content: "\1433";
  margin-right: .5rem;
  transition: transform .125s ease;
  display:inline-block;
  font-weight: normal;
  font-size: 0.8rem;
  line-height: 1rem;
}
section#files #hidePane {
  padding: .75rem 0.5rem;
  cursor: pointer;
}
section#files #hidePane:before {
  transform: rotateZ(180deg);
  filter: invert(0) !important;
  margin: 0 .25em;
}
section#files.hidePane #hidePane:before {
  transform: rotateZ(0deg);
}
section#files > .container {
  display: flex;
  height: 100%;
  width: 100%;
  background-color: rgba(84,190,255,0.025);
}
section#files #pane, section#files #editor {
  transition: .25s ease width;
}
section#files #pane {
  overflow: hidden;
  width: 15rem;
  flex-shrink: 0;
  box-sizing: border-box;
}
section#files.hidePane #pane {
  width: 0rem;
}
section#files #editor {
  background: #282c34;
  overflow: hidden;
  border-radius: 1rem;
  margin: 0.75rem;
  box-shadow: 0 .25em 1rem rgba(0,0,0,.1);
}
body.dark section#files #editor {
  background: #282c34;
}
body.light section#files #editor {
  background: #fff;
}
@media screen and (min-width: 40rem) {
  section#files #editor {
    width: calc(100% - 15rem);
  }
}
@media screen and (max-width: 39.99rem) {
  section#files #editor {
    width: 100%;
    flex-shrink: 0;
  }
}
section#files.hidePane #editor {
  width: calc(100% - 1.5rem);
}
section#files #codemirror {
  height: calc(100% - 2.5rem);
  overflow-y: auto;
}
@media screen and (orientation: portrait){
  section#files.pos1 #pane, section#files.pos2 #pane {
    height: 100%;
  }
}
section#files #filename {
  border-left: 1px solid #666;
  width: 100%;
  padding-left: 0.5rem;
}
body.light section#files #pane,
body.light section#files #filename {
  border-color: #aaa
}
section#files input {
}
section#files #editor #header {
  height: 2.5rem;
  border-bottom: 1px solid #666;
  display: flex;
  align-items: center;
  padding: 0 0.5rem 0 0;
}
section#files #pane .header {
  white-space: nowrap;
  padding: 0 0.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #666;

  display: none;
}
body.light section#files #pane .header,
body.light section#files #editor #header  {
  border-color: #ccc;
}
section#files #pane .header h2 {
  flex-grow: 2;
  text-align: center;
}
section#files #sidebar, section#file #pane .header {
  width: 15rem;
}
section#files #sidebar {
  overflow-y: auto;
  height: 100%;
  padding-top: 0.75em;
  box-sizing: border-box;
}
section#files #sidebar > details {
  padding: 0.5rem 0 0.25rem 0;
}

section#files #fileOnTarget,
section#files #fileOnProject {
  padding-left: .5em !important;
}
section#files #fileOnTarget details,
section#files #fileOnProject details {
  padding-left: .25em;
}
section#files .listedFile {
  width: 100%;
}
section#files .listedFile,
section#files #fileOnTarget summary,
section#files #fileOnProject summary {
  cursor: pointer;
  border-radius: .125rem;
}
section#files .listedFile {
  padding: .25em 1rem .25em 1rem;
}
section#files #fileOnTarget summary,
section#files #fileOnProject summary {
  transition: .25s ease background-color;
  padding: .25em 1rem 0em 1rem;
  margin-left: -.25rem;
}
section#files #fileOnTarget summary:focus,
section#files #fileOnProject summary:focus {
  background: rgba(68,153,204,.25);
}
section#files #fileOnTarget details > summary {
  margin-left: -.25em;
}

section#files .listedFile:hover,
section#files #fileOnTarget summary:hover,
section#files #fileOnProject summary:hover {
  background: rgba(68,153,204,.5);
}
section#files .listedFile:focus,
section#files #fileOnTarget summary:focus,
section#files #fileOnProject summary:focus {
  background: rgba(68,153,204,.25);
}
section#files .emptyDir {
  color: #aaa;
  font-style: italic;
  padding-left: .75rem;
}
section#files #fileOnTarget > summary::before,
section#files #fileOnTarget summary::before, section#files .listedFile:before,
section#files #fileOnProject > summary::before,
section#files #fileOnProject summary::before, section#files .listedFile:before {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	background: url('./media/icons.svg');
	background-size: auto 2.5rem;
	content: '';
	margin: 0 .125rem 0 0;
	flex-shrink: 0;
}

section#files #fileOnProject > summary::before {
	background-position: right calc(1.25rem*31) top !important;
}
section#files #fileOnTarget > summary::before {
	background-position: right calc(1.25rem*21) bottom !important;
}
section#files #fileOnTarget summary::before,
section#files #fileOnProject summary::before {
	background-position: left calc(-1.25rem*16) top;
}
section#files .listedFile:before {
	background-position: left calc(-1.25rem*17) top;
}
section#files button#script:before {
	background-position: left calc(-1.5rem*17) top;
}
section#files #fileOnProject details[open] summary:before,
section#files #fileOnProject details[open] summary:before {
	background-position: left calc(-1.25rem*16) bottom;
}
section#files .cm-scroller {
  overflow: auto;
}
section#files .cm-scrollers,
section#files .cm-content, section#files .cm-gutter {
  min-height: calc(100vh - 7.75rem) !important;
}
section#files .cm-gutters { margin: 1px; }
section#files .cm-scroller { overflow: auto; }
section#files .cm-wrap { border: 1px solid silver }
nav #project::before {
	background-position: left calc(-1.5rem*28) top;
}
nav #project.on::before {
	background-position: left calc(-1.5rem*28) bottom;
}
section#project .header {
  margin: 0.5rem 0 0.25rem 0;
}
section#project button#add {
  margin-right: .5rem;
}
section#project .listy {
  font-size: 0.9rem;
}
section#project #user-projects button h4 {
  padding:.5rem 0 0.125rem 0;
  margin-right: 0.5rem;
  width: 100%;
  text-align: left;
}
section#project #user-projects button:not(.shared) #sharedUID {
  display:none;
}
section#project #user-projects .listy #sharedUID,
section#project .listy #uid {
  border: #7d7d7d 1px solid;
  border-radius: 1em;
  padding: 0 .25em;
  background: rgba(125,125,125,.125); 
}
section#project #user-projects .listy #sharedUID:before,
section#project .listy #uid:before {
  content:'#'
}
section#project .listy #author,
section#project .listy #lastEdited {
  font-size: 0.8rem;
}
section#project .listy #assignedClass {
  font-size: 0.75rem;
  color: #4499cc;
  margin-left: 0.5rem;
}
section#project .listy #studentName {
  font-size: 0.8rem;
  font-weight: 600;
}
section#project #ask-shared-project .header > span {
  margin-right: 1rem;
}
section#project #ask-shared-project:not(.on) {
  display: none;
}
section#project .username {
  background-color: rgba(68,153,204,.25);
  display: flex;
  padding: .5em 1em;
  margin-left: 1em;
  border-radius: 1em;
}
section#project .username input {
  border-bottom: 1px dashed #666;
  margin: 0 .5em;
}
section#project > .container > .header {
    margin: 0.5rem 0.5rem 0.25rem 1rem;
}
section#dashboard #dashboard {
  width: 100%;
  height: 100%;
}
section#dashboard #header {
  width: 100%;
  height: 2.5rem;
  border-bottom: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 .25em rgba(0,0,0,.25);
  position: absolute;
  top: 0;
}
section#dashboard #header > span {
  height: 2.5rem;
  border-left: 1px solid #7d7d7d;
}
section#dashboard #header > span button:hover,
section#dashboard #header > span button:focus {
	background-color: rgba(68,153,204,.5);
}
section#dashboard #header > span button {
	background-color: rgba(68,153,204,0);
	border-radius: 0;
	border: none;
  transition: background-color ease .125s;
  padding: 0.5rem;
}
section#dashboard #dashboard.on #edit {
	background-color: rgba(68,153,204,.25);
}
section#dashboard #dashboard.on #edit:before {
	background-position: left calc(-1.5rem*9) bottom !important;
}
section#dashboard #header > div {
  display: flex;
  max-width: calc(100% - 4.5rem);
  overflow-x: auto;
}
section#dashboard #header > div > span {
  display: flex;
}
section#dashboard #tabs h3 {
  white-space: nowrap;
}
section#dashboard #tabs {
  padding-left: .5rem;
}
section#dashboard #tabs > button {
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  background-color: rgba(84,190,255,0);
  transition: .125s ease background-color;
  box-sizing: border-box;
  min-width: 5rem;
  text-align: center;
  border-radius: 1rem;
  margin: 0.25rem .125rem;
}
section#dashboard #tabs > button:hover,
section#dashboard #tabs > button:focus {
  background-color: rgba(84,190,255,0.5);
}
section#dashboard #tabs > button.on {
  background-color: rgba(84,190,255,0.25);
}
section#dashboard #header #add {
  margin-top: .25rem;
  height: 2.125rem;
}
section#dashboard #grid {
  width: 100%;
  height: calc(100% - 2.5rem);
  position: relative;
}
section#dashboard #grid #add {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  background-image: linear-gradient(90deg,rgba(110,84,255,.5),rgba(110,84,255,.5));
  box-shadow: 0 0.25rem .5rem rgba(0,0,0,.25);
  width: 3rem;
  height: 3rem;
}
section#dashboard #grid #add:before {
  margin: 0.45rem;
}

section#dashboard #grid #edit:before {
  margin: 0;
}

section#dashboard #addMenu > div {
  max-width: 14rem;
  padding: 0.5rem;
  margin-right: .75rem;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-left: auto;
}
section#dashboard #addMenu.on > div {
  margin-top: calc(100vh - 15rem);
}
section#dashboard #addMenu button {
  padding: .5em;
  border-radius: 0.5em;
  display: block;
  max-width: 5em;
}
@media screen and (max-width:39.99rem) {
  section#dashboard #addMenu.on > div {
    margin-top: calc(100vh - 14rem - 3rem);
  }
}
@media screen and (min-width:40rem) and (orientation:portrait) {
  section#dashboard.pos1 #addMenu.on > div {
    margin-top: calc(50vh - 10rem);
  }
}
@media screen and (max-width:39.99rem) and (orientation:portrait) {
  section#dashboard.pos1 #addMenu.on > div {
    margin-top: calc(50vh - 11rem);
  }
}
@media screen and (orientation:landscape) {
  section#dashboard.pos1 #addMenu > div {
    margin-right: calc(50vw - 1em) !important;
  }
}

/* Grid */

section#dashboard .muuri {
  position: relative;
}
section#dashboard .muuri-item {
  padding: 0.5rem;
  box-sizing: border-box;
  position: absolute;
}

section#dashboard .muuri-item > div {
  border-radius: 1em;
  width: 100%;
  height: 100%;
  transition: box-shadow ease .25s;
}
body.light section#dashboard .muuri-item > div {
  background: #eee;
}
body.dark section#dashboard .muuri-item > div {
  background: #333;
}
section#dashboard .muuri-item-dragging > div {
  box-shadow: 0 .25rem 1.5rem rgba(0,0,0,.2);
}
section#dashboard .muuri-item-dragging,
section#dashboard .muuri-item-releasing {
  z-index: 5;
}
section#dashboard #grid {
  scrollbar-gutter: stable;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 2.5rem;
}
body.light section#dashboard #grid {
  background: rgba(84,100,155,0.05);
}
section#dashboard #grid.on {
  overflow-y: hidden;
}
section#dashboard .muuri-item .silk,
section#dashboard #grid #silk,
section#dashboard .muuri #grab {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
}
section#dashboard #grid .muuri-item span,
section#dashboard #grid .muuri-item button {
  font-size: .8rem;
}
section#dashboard #grid .muuri-item h2,
section#dashboard #grid .muuri-item h3 {
  font-weight: normal;
}
section#dashboard #grid:not(.on):not(.ani) #silk {
  display: none;
}
section#dashboard #grid #silk {
  transition: background-color ease .125s;
  background: rgba(0,0,0,0);
  z-index: 1;
}
body.dark section#dashboard #grid.on #silk {
  background: rgba(0,0,0,.5);
}
body.light section#dashboard #grid.on #silk {
  background: rgba(125,125,125,.5);
}
/* Switch */
section#dashboard #grid .muuri-item.switch button.press {
  height: 100%;
  width: 100%;
  border-radius: 1rem;
  background: rgba(84,190,255,0.05);
  transition: .125s ease transform, .25s ease background-color;
  cursor:pointer;
  overflow: hidden;
}
section#dashboard #grid .muuri-item.switch button.press.on {
  background-color: rgba(84,190,255,0.5);
}
section#dashboard #grid .muuri-item.switch button.press:hover {
    transform: scale(1.02);
}
section#dashboard #grid .muuri-item.switch button.press:active {
    transform: scale(0.98);
}

/* Range */
section#dashboard #grid .muuri-item.range span {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 .25rem;
  overflow: hidden;
  justify-content: space-evenly;
  height: 100%;
}

section#dashboard #grid .muuri-item.range .container {
  display: flex;
  padding: 0 .5rem;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
section#dashboard #grid .muuri-item.range input {
  text-align: center;
  font-size: 1rem;
}
section#dashboard #grid .muuri-item.range #raise:before,
section#dashboard #grid .muuri-item.range #lower:before {
  margin: .5rem;
}

/* Gauge */
section#dashboard #grid .muuri-item.gauge .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
}
section#dashboard #grid .muuri-item.gauge .percentage {
  position: absolute;
  display: block;
  width: 100%;
  border-radius: 1rem;
  background: rgba(84,190,255,0.15);
  overflow: hidden;

  transition: .25s ease margin-top, .25s ease height;
  margin-top: 100%;
  height: 0%;
}

section#dashboard #grid .muuri-item.gauge .value {
  font-size: 1rem;
}

section#dashboard .muuri-item.chart > div {
  background-image: linear-gradient(90deg, rgba(84,190,255,0.05),rgba(84,190,255,0.05));
}
body.light section#dashboard .muuri-item.chart > div,
body.light section#dashboard #grid #add {
  background-color: #fff;
}
body.dark section#dashboard .muuri-item.chart > div,
body.dark section#dashboard #grid #add {
  background-color: #333;
}
section#dashboard .muuri #dismiss {
	position: absolute;
	padding: .125em;
	margin: -.5em;
	transition: .25s ease background-color;
	background: #999;
	display: none;
	height: 1.8rem;
	z-index: 2;
}
section#dashboard .muuri #dismiss:hover {
	background: #000 !important;
  border-color: transparent !important;
}
section#dashboard .muuri #dismiss:before {
	background-position: left calc(-1.5rem*8) top ;
}
section#dashboard .muuri #grab {
	cursor: grab;
	display: none;
}
section#dashboard #dashboard.on .muuri > div:not(#editing) button#dismiss,
section#dashboard #dashboard.on #grid:not(.on) #grab {
	display: block;
}
section#dashboard #dashboard.on #grid.on .muuri-item .silk {
  display: none;
}

/* actions */

#grid #actions > span {
	display: block;
	padding: 0 0.5rem 0.5rem 0.5rem;
	box-sizing:border-box;
	display: flex;
  flex-direction: column;

	overflow-x: hidden;
  overflow-y: auto;
	scrollbar-width: none;
}

section#dashboard #grid #actions.broad .silk {
  display: none;
}
section#dashboard #grid #actions.broad {
  position: absolute;
  transition: .25s ease right;
  box-sizing: border-box;
  height: calc(100% - 6.5rem);
  width: 14rem;
  right: -15rem;
  top: 4.75em;
  z-index: 1;
  overflow-y: overlay;
  border-radius: 1rem;
  overflow-x: hidden;
  box-shadow: 1rem 0 2rem rgba(0,0,0,0.2);
  transition-delay: .25s;
}
section#dashboard #grid #actions.broad > span {
  min-height: 100%;
  border-radius: 1rem;
}
section#dashboard #grid.on #actions.broad {
  right: 1rem;
}
#grid #actions.broad > span {
	width: 14rem;
}


section#dashboard #grid #actions.tall .silk {
  height: calc(90% - 8rem);
}
section#dashboard #grid #actions.tall {
  position: absolute;
  width: 100%;
  height: calc(100% - 2.5rem);
  z-index: 2;

  transition: .25s ease top;
  transition-delay: .25s;
  box-sizing: border-box;
  top: 100%;

  overflow-y: overlay;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
section#dashboard #grid #actions.tall > span {
  min-height: 100%;
}
section#dashboard #grid.on #actions.tall {
  top: 2.5rem;
}
#grid #actions.tall > span {
	width: 100%;
}

body.dark section#dashboard #grid #actions > span {
  background: #222;
  color: #aaa;
}
body.light section#dashboard #grid #actions > span {
  background: #fff;
  color: #666;
}

section#dashboard #grid #actions button.noicon{
	margin: 0;
	width: 100%;
	background: transparent !important;
}
section#dashboard #grid #actions > span > div {
  font-size: 0.9em;
	border-radius: .5em;
	margin: .125em 0 .125em 0;
	width: 100%;
	padding: .5em 0;
}
section#dashboard #grid #actions .button, #grid #actions .switch {
  transition: box-shadow ease .125s, .125s ease background-color, margin ease .125s;
}
section#dashboard #actions .switch {
	border: 1px solid #7d7d7d;
}
section#dashboard #actions .range button {
	margin: 0.5em 0.25em 0 0.25em !important;
}
section#dashboard #actions .range button:hover {
	box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.5);
}
section#dashboard #actions .range button:active {
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
section#dashboard #grid #actions .button:hover, #grid #actions .switch:hover {
  margin: 0 0 0.25em 0;
  box-shadow: 0 .125em .125em rgba(0, 0, 0, 0.5);
}
section#dashboard #grid #actions .switch.on {
	background: #3298dc;
}
section#dashboard #grid #actions .switch.on button {
	color: #fff
}
section#dashboard #grid #actions .range {
  width: 100%;
	display: block;
	padding: .5em;
	text-align: center;
	box-sizing: border-box;
}
section#dashboard #grid #actions input {
	border: none;
	border-bottom: 1px solid #7d7d7d;
  width: 100%;
  padding: 0.25em 0;
}
section#dashboard #actions select {
  border-radius: .4rem;
  display: inherit;
  width: 100%;
  padding: 0.5rem;
}

section#dashboard #storageManager.on {
  overflow-y: auto;
}
section#dashboard #storageManager > div {
  max-width: 30rem;
  padding: 0 1rem 1rem 1rem;
  min-height: 20rem;
  margin: 110vh auto 0 auto;
  overflow: hidden;
  text-align: center;
}
@media screen and (max-width: 30rem){
  section#dashboard #storageManager > div {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
}
section#dashboard #storageManager h3 {
  padding-top: 1rem;
}
section#dashboard #storageManager h4 {
  text-align: left;
  padding: 1rem 0 0 0;
}
section#dashboard #storageManager #mqttSession {
  width: 8em;
  padding: 0.5rem 0;
  margin: 0 0 0.5rem 0;
  border: 1px solid rgba(84,190,255,0.25);
  border-radius: 1.5rem;
  text-align: center;
  font-family: monospace;
  font-size:1rem;
  transition: .25s ease background-color;
}
section#dashboard #storageManager #mqttSession:focus {
  background: rgba(84,190,255,0.25);
}
section#dashboard #storageManager div.header {
  text-align: right;
  padding-top: 1em;
}
body.light section#dashboard #storageManager span.list {
	border: 1px solid #aaa;
}
body.dark section#dashboard #storageManager span.list {
	border: 1px solid #444;
}
body.light section#dashboard #storageManager span.list > div {
	border-bottom: 1px solid #aaa;
}
body.dark section#dashboard #storageManager span.list > div {
	border-bottom: 1px solid #444;
}
section#dashboard #storageManager span.list {
	display: block;
	padding: 0 .5em;
	border-radius: 1em;
}

section#dashboard #storageManager span > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.25em 0;
	user-select: text;
}

section#dashboard #storageManager span > div:last-child {
	border-bottom: none !important;
}
@keyframes pulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
div#status-bar button#mqtt:not(.on):not(.off){
  animation: pulse 1s infinite;
}
div#status-bar button#mqtt:before {
  background-position: left calc(-1.25rem*40) top;
}
div#status-bar button#mqtt.off:before {
  background-position: left calc(-1.25rem*40) bottom;
}

/* Coordinate */
section#dashboard #grid .muuri-item.coordinate span {
  display: block;
  text-align: center;
  padding: 0.5rem;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
section#dashboard #grid .muuri-item.coordinate h2 {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1;
}
section#dashboard #grid .muuri-item.coordinate canvas {
  border-radius: 0.5rem;
  cursor: crosshair;
  display: block;
  margin: 0.25rem auto 0;
}
/* Coordinate sizes - square containers */
section#dashboard #grid .muuri-item.coordinate.coord-small {
  width: 150px !important;
  height: 150px !important;
}
section#dashboard #grid .muuri-item.coordinate.coord-medium {
  width: 250px !important;
  height: 250px !important;
}
section#dashboard #grid .muuri-item.coordinate.coord-large {
  width: 400px !important;
  height: 400px !important;
}

/* Drawing */
section#dashboard #grid .muuri-item.drawing span {
  display: block;
  text-align: center;
  padding: 0.5rem;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
section#dashboard #grid .muuri-item.drawing h2 {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1;
}
section#dashboard #grid .muuri-item.drawing canvas {
  border-radius: 0.5rem;
  cursor: crosshair;
  display: block;
  margin: 0.25rem auto 0;
}
section#dashboard #grid .muuri-item.drawing .drawing-buttons {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}
section#dashboard #grid .muuri-item.drawing .drawing-buttons button {
  font-size: 0.6rem;
  padding: 0.2rem 0.4rem;
  min-width: auto;
}
/* Drawing sizes - square containers */
section#dashboard #grid .muuri-item.drawing.drawing-small {
  width: 200px !important;
  height: 200px !important;
}
section#dashboard #grid .muuri-item.drawing.drawing-medium {
  width: 300px !important;
  height: 300px !important;
}
section#dashboard #grid .muuri-item.drawing.drawing-large {
  width: 450px !important;
  height: 450px !important;
}
nav #device::before {
	background-position: left calc(-1.5rem*20) top;
}
nav #device.using::before {
	background-position: left calc(-1.5rem*20) bottom;
}
section#device #new-connection h3, section#device #devices, section#device #target-device {
  margin-top: 0.75rem;
}
section#device button:not(.unsupported) > div.icon {
  color: #fff !important;
}
section#device button:not(.unsupported) > div.icon::before {
  filter: invert(0) !important;
}
section#device #new-connection #WebSerial:not(.unsupported) > div {
  background: linear-gradient(130deg, rgba(106,168,251,1) 0%, rgba(123,73,173,1) 200%);
}
section#device #new-connection #WebSocket:not(.unsupported) > div {
  background: linear-gradient(130deg, rgba(106,168,251,1) -100%, rgba(123,73,173,1) 200%);
}
section#device #new-connection #WebBluetooth:not(.unsupported) > div {
  background: linear-gradient(130deg, rgba(106,168,251,1) -200%, rgba(123,73,173,1) 100%);

}
section#device #new-connection #WebSerial.unsupported .silk,
section#device #new-connection #WebSerial.unsupported #baudrate {
  display: none;
}
section#device #new-connection #WebSerial:not(.unsupported) #baudrate {
  text-align:center;
  position: absolute;
  margin-top: -5em;
  margin-left: -1.5em;
}
section#device #new-connection #WebSerial:not(.unsupported) .silk {
  position:relative;
  margin-top: -3rem;
  width: 100%;
  height: calc(100% - 2.75rem);
  display: block;
}
body.light #new-connection #WebSerial select {
  border-color: #fff;
  color: #fff;
}
section#device button.unsupported {
  user-select: none;
}
body.dark section#device button.unsupported > div {
  border: 1px solid #fff;
}
body.light section#device button.unsupported > div {
  border: 1px solid #000;
}
section#device #new-connection #WebSerial > div:before {
	background-position: left calc(-1.5rem*23) top;
}
section#device #new-connection #WebSocket > div:before {
	background-position: left calc(-1.5rem*24) top;
}
section#device #new-connection #WebBluetooth > div:before {
	background-position: left calc(-1.5rem*25) top;
}
section#device #new-connection button div {
  justify-content: flex-start;
  padding-left: 1em;
}
section#device #new-connection button div:before {
  margin: -6rem -1.5rem 0 0 !important;
}
section#device #devices button {
  flex-shrink: 0;
}
section#device #devices button > div {
  min-width: 15rem;
}
section#device #devices button > div {
  transition: .25s ease background-color, .125s ease transform;
  display: block;
}
body.dark section#device #devices button > div {
  border: 1px solid #fff;
}
body.light section#device #devices button > div {
  border: 1px solid #000;
}
section#device .device-connect.master button > div,
section#device button.unsupported > div {
  cursor: default !important;
}
section#device .device-connect:not(.master) button {
  cursor: pointer
}
section#device .device-connect.master #devices .silk {
  display: none;
}
section#device .device-connect:not(.master) #devices .silk {
  position: absolute;
  width: 15rem;
  height: 9em;
  margin-top: -4rem;
  margin-left: -2rem;
}
section#device button:not(.unsupported) span {
  display: none;
}
section#device button.unsupported span {
  width: 0;
  float: right;
  font-size: 0.9rem;
  margin-right: 7.75em;
  margin-left: -7.75em;
  margin-top: 0.25em;
  font-weight: bold;
}
section#device #devices button > div > div.using-text {
  float: right;
  margin-top: -6.125rem;
  margin-left: -1em;
  visibility: hidden;
}
section#device #devices button.on > div > div.using-text {
  visibility: visible;
}
section#device #devices button > div > div {
  font-size: 0.9rem;
}
body.dark section#device #devices button.on > div {
  background-color: #fff;
  color: #222;
}
body.dark section#device #devices button.on h4 {
  color: #222;
}
body.light section#device #devices button.on > div {
  background-color: #444;
  color: #eee;
}
body.light section#device #devices button.on h4 {
  color: #eee;
}
section#device button#disconnect {
  float: left;
  width: 8em;
  min-width: 8em;
  margin-top: -2em;
  margin-left: -1.75em;
  display: none;
}
section#device button#fetch {
  float: left;
  width: 7.5em;
  min-width: 7em;
  margin-top: -4em;
  margin-left: -1.75rem;
  display: none;
}
section#device .device-connect #new-connection {
  transition: .5s ease height, .25s ease opacity;
  overflow: hidden;
  height: 9rem;
}
section#device .device-connect.master #new-connection {
  height: 0rem;
  opacity: 0;
}
section#device .device-connect.master button.on button#disconnect,
section#device .device-connect.master button.on button#fetch {
  display: inline-flex;
  filter: invert(1);
}
section#device .device-connect.master button:focus > div,
section#device .device-connect.master button:active > div,
section#device button.unsupported:active > div{
  transform: scale(1) !important;
}

@media screen and (min-width:80em) {
  section#device:not(.pos1):not(.pos2) .container {
    display:flex;
    flex-wrap: wrap;
    max-width: 100%;
    justify-content:center;
  }
  section#device:not(.pos1):not(.pos2) .container > h2 {
    max-width: 90%;
  }
  section#device:not(.pos1):not(.pos2) .container .device-connect,
  section#device:not(.pos1):not(.pos2) .container .device-current {
    width: 45%;
  }
}

section#device #target-device {
  background-color: rgba(84,190,255,0.05);
  border-radius: 1.5rem;
  padding-top: 1rem;
}
section#device #target-device > div {
  text-align: center;
}
section#device #target-device select {
  margin-right: 1rem;
}
section#device #target-device #pinout {
  max-width: 40rem;
  width: 100%;
}

section#device #webSocketSetup.on {
  overflow-y: auto;
}
section#device #webSocketSetup > div {
  max-width: 30rem;
  padding: 0 1rem;
  min-height: 20rem;
  margin: 110vh auto 0 auto;
  overflow: hidden;
  text-align: center;
}
@media screen and (max-width: 30rem){
  section#device #webSocketSetup > div {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
}
 
section#device #webSocketSetup h3 {
  padding-top: 1rem;
}
section#device #webSocketSetup h4 {
  text-align: left;
  padding: 1rem 0 0 0;
}
section#device #webSocketSetup input {
  padding: .5rem 0;
  border-bottom: 1px solid #666;
}
section#device #webSocketSetup > div > div {
  text-align: right;
  padding-top: 1em;
} 
section#device #webSocketSetup #connect {
  margin-bottom: .5rem;
  background: linear-gradient(130deg, rgba(106,168,251,1) -100%, rgba(123,73,173,1) 200%);
  color: #fff !important;
  padding: .5rem 1rem;
  margin-left: .25rem;
}
section#device #webSocketSetup #addressConf {
  transition: .25s ease height, .25s ease border-color;
  height: 0rem;
  overflow: hidden;
  padding-top: 0;
  border: 1px solid transparent;
}
section#device #webSocketSetup #addressConf {
  margin-bottom: .5rem;
}
section#device #webSocketSetup #addressConf.on {
  height: 8rem;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}
section#device #webSocketSetup #connect:before {
  filter: invert(0) !important;
}
section#device #webSocketSetup #addressConf > div {
  display: flex;
}
section#device #webSocketSetup #addressConf span {
  margin: 0.5rem  0.25rem;
  color: #666;
}
section#device #webSocketSetup #addressConf #scan {
  padding: .25rem .5rem;
  margin: .5rem;
  border-radius: 1rem;
  transition: background-color .25s ease;
}
section#device #webSocketSetup .reconnectWebSocket{
  padding-top: 0 !important;
}

section#device #webSocketSetup #addressConf #scan:focus {
  background-color: rgba(68,153,204,.5);
}
body.light section#device #webSocketSetup #addressConf #scan {
  border: 1px solid #000;
}
body.dark section#device #webSocketSetup #addressConf #scan {
  border: 1px solid #fff;
}
section#device #webSocketSetup #addressConf input {
  text-align: right;
}
section#device #webSocketSetup #addressConf input:first-child {
  width: 6rem;
}
section#device #webSocketSetup #addressConf input:last-child {
  text-align: left;
}
section#device #webSocketSetup #addressFound {
  display: none;
  padding-top: 0;
}
section#device #webSocketSetup #addressFound.on {
  display: block;
}
section#device #webSocketSetup #addressFound > div {
  margin: .75em 0 .5rem;
}
section#device #webSocketSetup #addressFound div {
  text-align: left;
}
section#device #webSocketSetup #addressFound .listy {
  margin: 0 0 .5rem 0;
}
section#device #webSocketSetup #addressFound .listy button > div {
  display: block;
}
section#device .reconnectWebSocket .checkswitch {
  padding: .5em 0;
}
div#status-bar button#device:before {
  background-position: left calc(-1.25rem*21) top;
}
div#status-bar button#device.on:before {
  background-position: left calc(-1.25rem*21) bottom;
}
div#status-bar button#target:before {
  background-position: left calc(-1.25rem*37) top;
}
div#status-bar button#firmware:before {
  background: none;
  width: 0;
}

nav #prompt::before {
	background-position: left calc(-1.5rem*12) top;
}
nav #prompt.on::before {
	background-position: left calc(-1.5rem*12) bottom;
}
section#prompt .container {
  overscroll-behavior: none;
}
section#prompt .wrapper {
  margin: 0.75rem 1rem 0;
  padding: 0.5em 0.5em 0.5em 0.5em;
  border-radius: 1em;
  overflow: hidden;
  box-shadow: 0 .25em 0.5rem rgba(0,0,0,.25);
  max-width: 100%;
}
section#prompt .wrapper {
  background: #000;
}
section#prompt .quick-actions {
  display: flex;
  overflow-x: auto;
  padding: 0 .75rem;
  font-size: 0.9em;
}
section#prompt .quick-actions > button {
  border: 1px solid #7d7d7d;
  border-radius: 1rem;
  padding: .25rem .5rem;
  margin: .5rem .25rem .5em .25rem;
  display: inline-block;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color ease .25s;
}
section#prompt .quick-actions > button:hover,
section#prompt .quick-actions > button:focus {
  background-color: rgba(68,153,204,.5);
}
div#status-bar button#tasks:before {
  background-position: left calc(-1.25rem*38) top;
}
div#status-bar button#tasks.working:before {
  background-position: left calc(-1.25rem*38) bottom;
}
div#status-bar button#tasks.dirty:before {
  background-position: left calc(-1.25rem*39) top;
}
div#status-bar button#tasks {
  display: none;
}
div#status-bar button#tasks.on {
  display: inline-flex;
}
#prompt.progress-bar.on {
  height: .3em;
}
#prompt.progress-bar {
  z-index: 500;
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
  height: 0;
  transition: .125s ease height;
  top: 0;
}
#prompt.progress-bar  div {
  transition: .125s linear width;
  content: '';
  position: absolute;
  height: 100%;
  background: #3298dc;
}
/**
 * Copyright (c) 2014 The xterm.js authors. All rights reserved.
 * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
 * https://github.com/chjj/term.js
 * @license MIT
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * Originally forked from (with the author's permission):
 *   Fabrice Bellard's javascript vt100 for jslinux:
 *   http://bellard.org/jslinux/
 *   Copyright (c) 2011 Fabrice Bellard
 *   The original design remains. The terminal itself
 *   has been extended to include xterm CSI codes, among
 *   other features.
 */

/**
 *  Default styles for xterm.js
 */

.xterm {
    position: relative;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    max-width: 100%;
    overflow: hidden;
}

.xterm.focus,
.xterm:focus {
    outline: none;
}

.xterm .xterm-helpers {
    position: absolute;
    top: 0;
    /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
    z-index: 5;
}

.xterm .xterm-helper-textarea {
    padding: 0;
    border: 0;
    margin: 0;
    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    width: 0;
    height: 0;
    z-index: -5;
    /** Prevent wrapping so the IME appears against the textarea at the correct position */
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}

body.light .xterm .composition-view {
    background: #fff;
    color: #000;
}
body.dark .xterm .composition-view {
    background: #000;
    color: #fff;
}
.xterm .composition-view {
    display: none;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}

.xterm .composition-view.active {
    display: block;
}

body.dark .xterm .xterm-viewport {
    background-color: #000;
}
body.light .xterm .xterm-viewport {
    background-color: #fff;
}
.xterm .xterm-viewport {
    overflow-y: scroll;
    cursor: default;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.xterm .xterm-screen {
    position: relative;
}

.xterm .xterm-screen canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.xterm .xterm-scroll-area {
    visibility: hidden;
}

.xterm-char-measure-element {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -9999em;
    line-height: normal;
}

.xterm {
    cursor: text;
}

.xterm.enable-mouse-events {
    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
    cursor: default;
}

.xterm.xterm-cursor-pointer {
    cursor: pointer;
}

.xterm.column-select.focus {
    /* Column selection mode */
    cursor: crosshair;
}

.xterm .xterm-accessibility,
.xterm .xterm-message {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    color: transparent;
}

.xterm .live-region {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.xterm-dim {
    opacity: 0.5;
}

.xterm-underline {
    text-decoration: underline;
}

.xterm-strikethrough {
    text-decoration: line-through;
}
nav #classes::before {
	background-position: left calc(-1.5rem*10) top;
}
nav #classes.on::before {
	background-position: left calc(-1.5rem*10) bottom;
}

/* Classes Page Styles */

.classes-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.classes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e0e0e0;
}

.classes-header h1 {
    color: #333;
    font-size: 28px;
    margin: 0;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
    background: #6c757d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-secondary:hover {
    background: #5a6268;
}

.btn-danger {
    background: #dc3545;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-danger:hover {
    background: #c82333;
}

.btn-link {
    background: none;
    border: none;
    color: #667eea;
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
}

.btn-link:hover {
    color: #764ba2;
}

/* Class Grid */
.classes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.class-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.class-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.class-card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 12px;
}

.class-card h3 {
    color: #333;
    font-size: 20px;
    margin: 0 0 8px 0;
}

.class-code {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.class-info {
    color: #666;
    font-size: 14px;
    margin: 8px 0;
}

.class-info strong {
    color: #333;
}

/* Class Detail View */
.class-detail {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.class-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e0e0e0;
}

.class-title-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.class-detail h2 {
    color: #333;
    font-size: 24px;
    margin: 0;
}

.back-btn {
    background: none;
    border: none;
    color: #667eea;
    font-size: 24px;
    cursor: pointer;
    padding: 5px 10px;
    transition: color 0.2s;
}

.back-btn:hover {
    color: #764ba2;
}

/* Tabs */
.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
}

.tab {
    background: none;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.tab:hover {
    color: #667eea;
}

.tab.active {
    color: #667eea;
    border-bottom-color: #667eea;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Students Table */
.students-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.students-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.students-table thead {
    background: #f8f9fa;
}

.students-table th,
.students-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.students-table th {
    font-weight: 600;
    color: #333;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.students-table td {
    color: #666;
    font-size: 14px;
}

.students-table tbody tr:hover {
    background: #f8f9fa;
}

/* Status Badges */
.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.status-active {
    background: #d4edda;
    color: #155724;
}

.status-not-changed {
    background: #fff3cd;
    color: #856404;
}

.password-display {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #333;
}

.password-hidden {
    color: #999;
    letter-spacing: 2px;
}

/* Projects List */
.projects-list {
    display: grid;
    gap: 12px;
}

.project-item {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid #667eea;
    transition: background 0.2s;
}

.project-item:hover {
    background: #e9ecef;
}

.project-item-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 8px;
}

.project-item h4 {
    color: #333;
    font-size: 16px;
    margin: 0;
}

.project-meta {
    color: #666;
    font-size: 13px;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.empty-state p {
    font-size: 16px;
    margin: 0;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    animation: fadeIn 0.2s ease-out;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content {
    background: white;
    border-radius: 12px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e0e0e0;
}

.modal-header h3 {
    color: #333;
    font-size: 22px;
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.close-btn:hover {
    color: #333;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: #333;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

/* Alert Messages */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.alert-warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

/* Add Student Modal Specific */
.student-search-section {
    margin-bottom: 24px;
}

.search-input-group {
    position: relative;
}

.search-input-group input {
    padding-right: 40px;
}

.search-results {
    margin-top: 12px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.search-result-item {
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
    transition: background 0.2s;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: #f8f9fa;
}

.search-result-item strong {
    display: block;
    color: #333;
    margin-bottom: 4px;
}

.search-result-item span {
    color: #666;
    font-size: 13px;
}

.divider {
    text-align: center;
    margin: 24px 0;
    position: relative;
}

.divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #e0e0e0;
}

.divider span {
    background: white;
    padding: 0 16px;
    color: #999;
    font-size: 14px;
    position: relative;
    z-index: 1;
}

/* Password Display Section */
.password-display-section {
    background: #f8f9fa;
    border: 2px dashed #667eea;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
}

.password-display-section h4 {
    color: #333;
    margin: 0 0 12px 0;
    font-size: 16px;
}

.password-value {
    font-family: 'Courier New', monospace;
    font-size: 24px;
    font-weight: 700;
    color: #667eea;
    letter-spacing: 2px;
    margin: 12px 0;
}

.password-note {
    color: #666;
    font-size: 13px;
    margin-top: 12px;
}

.copy-password-btn {
    background: #667eea;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 12px;
    transition: background 0.2s;
}

.copy-password-btn:hover {
    background: #764ba2;
}

/* Student List View (for students) */
.student-classes-list {
    display: grid;
    gap: 16px;
}

.student-class-item {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.student-class-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.student-class-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.student-class-item h3 {
    color: #333;
    font-size: 20px;
    margin: 0;
}

.student-class-info {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

/* Loading State */
.loading {
    text-align: center;
    padding: 40px;
    color: #999;
}

.loading::after {
    content: '...';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% {
        content: '.';
    }
    40% {
        content: '..';
    }
    60%, 100% {
        content: '...';
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .classes-grid {
        grid-template-columns: 1fr;
    }

    .classes-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .class-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .students-table {
        font-size: 12px;
    }

    .students-table th,
    .students-table td {
        padding: 8px;
    }

    .modal-content {
        width: 95%;
        padding: 20px;
    }
}
section#blocks #blockly {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #333;
}
nav #blocks::before {
	background-position: left calc(-1.5rem*19) top;
}
nav #blocks.on::before {
	background-position: left calc(-1.5rem*19) bottom;
}
section#blocks {
  display: block;
  visibility: hidden;
}
section#blocks.on {
  visibility: visible;
}

section#blocks #code, 
section#blocks #run {
  position: absolute;
  width: 3rem;
  height: 3rem;
  right: calc(30vw + 13.125rem);
  transition: .25s ease border-radius, .25s ease background-color, .25s ease right, .25s ease bottom;
}

section#blocks #code:before, 
section#blocks #run:before {
  margin: 0.45rem;
}
section#blocks #run {
  bottom: 6.5rem;
  border-radius: 0 0 1.5rem 1.5rem;
}
section#blocks #code { 
  border-radius: 1.5rem 1.5rem 0 0 ;
  bottom: 9.5rem;
}
section#blocks #code, 
section#blocks #run {
  background: rgba(125,125,125,.5)
}
section#blocks #blocks-code.on #code, 
section#blocks #blocks-code.on #run {
  border-radius: 1.5rem;
  right: 1.125rem;
}
section#blocks #blocks-code.on #code {
  bottom: 4.75rem;
}
body.light section#blocks #blocks-code.on #code {
  background-color: #fff;
}
body.dark section#blocks #blocks-code.on #code {
  background-color: #282c34;
}
section#blocks #blocks-code.on #code:before {
  background-position: left calc(-1.5rem*0) bottom;
}
section#blocks #blocks-code #codemirror {
  height: 100%;
  overflow-y: auto;
  border-radius: 1rem;
}
section#blocks #blocks-code #codemirror .cm-content {
  padding-bottom: 8rem;
}
section#blocks .cm-scroller {
  overflow: auto;
}
section#blocks .cm-scrollers,
section#blocks .cm-content, section#files .cm-gutter {
  min-height: calc(100vh - 4.25rem) !important;
}
section#blocks .cm-gutters { margin: 1px; }
section#blocks .cm-scroller { overflow: auto; }
section#blocks .cm-wrap { border: 1px solid silver }
section#blocks #blocks-code.on #run {
  bottom: 1.5rem;
  z-index: 2;
}
section#blocks #blocks-code.on #run {
  background-color: rgba(84,190,255,.5);
  box-shadow: 0 0.25rem .5rem rgba(0,0,0,.25);
}
section#blocks #blocks-code #run:before {
  transition: ease .125s background-position;
}
section#blocks #blocks-code #run.on:before {
  background-position: left calc(-1.5rem*18) bottom;
}
body.light section#blocks #blocks-code,
body.light section#blocks #codemirror button#copy {
  background-color: #fff;
}
body.dark section#blocks #blocks-code,
body.dark section#blocks #codemirror button#copy {
  background-color: #282c34;
}
section#blocks #blocks-code {
  width: calc(30% + 10rem);
  top: 1rem;
  bottom: 1rem;
  transition: right ease .25s;
  right: calc(-30vw - 11rem);
  position: absolute;
  border-radius: 1rem;
  box-shadow: 0 0 .5rem rgba(0,0,0,.25);
}
section#blocks #blocks-code.on {
  right: 1rem;
}
section#blocks #codemirror button#copy {
  position: absolute;
  bottom: 1.5rem;
  margin-left: 1.5em;
  z-index: 1;
}
body.dark section#blocks .blocklyCommentTextarea {
  background-color: #333 !important;
}

body.dark section#blocks .blocklyEditableText.editing,
body.dark .blocklyHtmlInput {
  color: #000 !important;
}