body { font-size: 90%; }

div#main {
  height: 100vh;
  /* border: 1px solid red; */
}

h1 { margin: 0.3em 0; }

.small { font-size: 85%; }

#fileDropZone {
}

i { color: #666; }

code { font-size: 90%; }

button,
.button {
  background-color: #079;
  color: white;
  border-radius: 8px;
  padding: 4px 15px;
  margin-bottom: 5px;
  cursor: pointer;
  font-weight: bold;
  border-width: 2px;
  border-style: solid;
  border-bottom-color: #046;
  border-right-color: #046;
  border-left-color: #09b;
  border-top-color: #09b;
}
button:hover,
.button:hover {
  /* background-color: #3ac; */
  background-color: #046;
}
button i,
.button i {
  /* font-size: 120%; */
  color: #bce;
  margin: 0 0.3em;
}

.row { margin-bottom: 8px; }

/*a.disabled {
    pointer-events: none;
    color: #999;
}*/

.panel {
  background-color: #cdf;
  border-radius: 8px;
  /*margin: 10px;*/
  padding: 8px;
  margin-bottom: 5px;
}

.subPanel {
  background-color: #abe;
  border-radius: 6px;
  padding: 6px;
  margin-bottom: 5px;
}

#sysexList {
  cursor: pointer;
}

#sysexList:hover {
  background-color: #bcf;
}

.closeButton {
  float: right;
  padding: 3px;
  margin: -2px;
  /* padding: 4px; */

  /*
  border-radius: 4px;
  background-color: #448;
  color: white;
  font-weight: bold;
  */
}
.closeButton:hover {
  background-color: #fff;
}

.portSelector {
  /*display: inline-block;*/
}

/* .button {
  cursor: pointer;
} */



div.expander {
  padding: 0px;
  position: relative;
}

div.expander .title::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f138";
  position: absolute;
  left: 0em;
  color: #666;
}

div.expander .title.expanded::before {
  content: "\f13a";
}

div.expander .title {
  padding-left: 1.5em;
  margin-top: 0.5em;
  cursor: pointer;
}
div.expander .title h3 { margin-top: 0; }

div.expander .contents { display: none; }

div.expander .contents.expanded { display: block; }