body, html {
    height: 100%;
    max-height: 100%;
}

body {
    /*font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',*/
    /*'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    background-color: #cbcbd7;
}

header {
    margin: 10px 0;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
}

.title {
    font-weight: bold;
}

main {
    padding: 0 0 0 10px;
}

.panel {
    background-color: #ffffff;
    margin: 0 10px 10px 0;
    border-radius: 3px;
    padding: 10px;
}

.port-name {
    white-space: normal;
}

.messages {
    flex-grow: 2;
    overflow-y: auto;
}

.message-name {
    width: 8rem;
}

#logentries {
    font-family: monospace;
    font-size: 0.85rem;
}

#logentries-wrapper {
    overflow-y: scroll;
    max-height: calc(100vh - 100px);
}

.logentry {
    white-space: pre;
}

#end-of-list {
    padding: 0 0 5px 0;
}

.border-bottom {
    border-bottom: 1px solid black;
}

.block-title {
}

.ports {
}

.tools {
}

.messages-groups {
    display: flex;
}

.messages-group {
}

.voice-msg-grid {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.25rem;
    justify-content: start;
    justify-items: end;
}

.sysex-msg-grid {
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.25rem;
    justify-content: start;
}

.grid-col-span-2 {
    grid-column: span 2;
}

.saved-msgs-grid {
    display: grid;
    grid-template-columns: 140px auto auto auto auto;
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.25rem;
    justify-content: start;
    align-items: baseline;
}

.justify-start {
    justify-self: start;
}

.msg-name {
    justify-self: start;
}

div.data {
    font-family: monospace;
}

select.data {
    text-align: end;
}

input.data {
    width: 3rem;
    text-align: end;
}

input.sysex {
    width: 40rem;
}

.events {
    padding: 0 20px;
    width: 30%;
}

.bottom {
}

h1, h2 {
    margin: 0;
}

.flex-row {
    display: flex;
}

.flex-grow {
    flex-grow: 1;
}

.space-between {
    justify-content: space-between;
}

.item-center {
    align-items: center;
}

.bold {
    font-weight: bold;
}

.light {
    color: gray;
}

.line140 {
    line-height: 140%;
}

.mt-5 {
    margin-top: 5px;
}

.mb-5 {
    margin-bottom: 5px;
}

.mr-5 {
    margin-right: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.mr-10 {
    margin-right: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-10 {
    margin-bottom: 10px;
}

.my-10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.my-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.ml-5 {
    margin-left: 5px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-20 {
    margin-left: 20px;
}

.ml-30 {
    margin-left: 30px;
}

.mr-20 {
    margin-right: 20px;
}

.pt-5 {
    padding-top: 5px;
}

.pt-10 {
    padding-top: 10px;
}

.span-2-cols {
    grid-column: span 2;
}

.span-3-cols {
    grid-column: span 3;
}

.text-small {
    font-size: 0.85rem;
}

.infos pre {
    font-size: 1rem;
}

div.warning-message a {
  font-weight: bold;
}

.midi-support-warning-top {
  background-color: #ff8125;
  padding: 10px 20px;
  font-size: 1.5rem;
  display:none;
}

.midi-support-warning.show {
  display: flex;
}

.midi-support-warning-top a {
  font-weight: bold;
  text-decoration: none;
  color: blue;
}